为什么vue组件数据一定要是函数？

Question

我正在阅读 Vue components ，发现他们对为什么数据需要成为一个函数的解释有点令人困惑：

根实例

var vm = new Vue({
  el: '#example',
  data: {
    message: 'here data is a property'
  }
})

一个组件

var vm = new Vue({
  el: '#example',
  data: function () {
     return {
       counter: 0
     }
  }
})

Vue 文档通过为每个组件分配一个全局计数器变量来解释这种差异，然后他们对每个组件共享相同的数据感到惊讶……他们也没有解释为什么他们已经在这里使用了一个函数。

 var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<div>{{ counter }}</div >',
  data: function () {
    return data
  }
})

当然现在共享数据

<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>

当您引用全局对象作为数据源时，组件没有自己的数据也就不足为奇了。对于将数据作为属性的根 Vue 实例也是如此。

 var mydata = { counter: 0 }

var vm1 = new Vue({
  el: '#example1',
  data: mydata
})

var vm2 = new Vue({
  el: '#example2',
  data: mydata
})

所以我仍然有一个问题，为什么组件不能有数据属性？

原文由 Kokodoko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据我的理解，这是为了节省内存

许多框架，例如 Angular 2 或（有时）React，使组件的每个实例成为一个单独的对象。这意味着每个组件需要的一切都为每个组件初始化。不过通常情况下，您实际上只需要为每个初始化保持组件的数据独立。方法等保持不变。

Vue 通过让数据成为一个返回对象的函数来避免这个陷阱。这允许单独的组件具有单独的内部状态，而无需完全重新实例化整个组件。方法、计算属性定义和生命周期挂钩仅创建和存储一次，并针对组件的每个实例运行。

看到这个

原文由 Samuel James 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

数据选项应该始终是返回新对象的组件上下文中的函数。

这个预防措施是 vue 做的。因此，无论何时直接在数据选项中定义对象，vue 都会发现错误。

永远不允许组件直接改变其状态。这可以防止我们在组件没有自己的状态时搞砸和做坏事。

如果 vue 没有采取这种预防措施，那么您将有机会改变该组件拥有的任何其他组件，这将是一个安全问题。

文档 中的示例：

很高兴理解为什么存在这些规则，所以让我们作弊吧。

 <div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // data is technically a function, so Vue won't
  // complain, but we return the same object
  // reference for each component instance
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

由于所有三个组件实例共享同一个数据对象，因此递增一个计数器会使它们全部递增！哎哟。让我们通过返回一个新的数据对象来解决这个问题：

 data: function () {
  return {
    counter: 0
  }
}

现在我们所有的计数器都有自己的内部状态。

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 4.0 许可协议