javascript - 新建vue实例的main变量在哪里使用

Question

我显然在这里某处遗漏了要点，但是在哪里使用新 vue 实例的主变量？

我是 vue.js 的新手(很明显)，在阅读各种文档时，我不禁注意到每个新的 vue 实例都以类似 var app = new Vue({在我读过的示例中，这个 app 变量没有在 js 或 html 中再次被引用。代码工作正常，无需在任何地方引用它。

有人可以建议我在哪里或为什么要使用 app 变量吗？

非常感谢

Answer 1

如果您不需要或不想捕获 new Vue() 的结果，则完全不需要。

完成它的原因主要是为了测试(来自控制台的 ala)或与外部库的交互。因为 Vue 的所有方法和数据都在变量上可用，所以可以调用这些方法并从 Vue 外部使用该数据。

例如，假设我的页面上有一些完全在 Vue 之外的逻辑，其中有一些我想在 Vue 内部使用的数据。

const externalData = {message:"I'm some interesting data."}

const myVueApp = new Vue({
  el: "#app",
  data:{
      message: null
  }
})

myVueApp.message = externalData.message

这里的代码是从外部 Vue 设置 Vue 的消息属性。

这主要在您有现有代码并将 Vue 集成到现有环境中时有用。

另一种情况就是简单的测试。打开您的控制台并运行下面的代码片段。将上下文更改为代码段的 javascript:

然后输入

app.message = "Hey, this is nifty!"

新消息将反射(reflect)在 Vue 中。

console.clear()

const app = new Vue({
  el: "#testing",
  data:{
    message: "Change me from the console!"
  }
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="testing">
  {{message}}
</div>