为什么将Vue实例保存在变量或常量中？

Question

我是Vue的新手。在大多数教程和文档中，我已经看到new Vue实例被保存在app或任何命名常量中。我想知道如何将Vue实例保存在变量或常量帮助中？

const app = new Vue({
  el: "#app",
  components: {},
  methods: {}
  // options
})

Answer 1

取决于您的用例。

一个原因可能是您在生产中已经部署了应用。您可能只想将Vue.js添加到应用程序的某些部分。您甚至可能在同一页面上有多个vue实例，因此保存对它们的引用很有意义。

另一个原因是使用全局事件总线。实现此功能时，您将保存对新Vue组件的引用。与此类似：

Vue.prototype.$eventBus = new Vue();

Answer 2

我想我有一个用例。而且我认为这也澄清了我的问题。

请注意，我们不能在options属性或回调函数上使用箭头功能，例如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。由于箭头函数没有this，因此this将被视为任何其他变量，并在父作用域中按词法查找，直到找到为止，这通常会导致诸如Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

但是，如果我们将箭头函数与data属性一起使用，则这将不是该组件的实例，但是我们仍然可以将该实例作为该函数的第一个参数来访问：

var data = { a: 1 }

// direct instance creation
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: vm => ({ a: vm.myProp })
})

但是这不是常见的做法。我们通常将组件中的数据属性声明为函数，以便我们可以直接访问vue实例。

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})