vue data为什么是一个函数

1、 vue的data为什么是返回一个函数呢

从原型链开始讲

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}
上面是一个虚拟的组件构造器，真实的组件构造器方法很多

var component1 = new MyComponent()
var component2 = new MyComponent()
上面实例化出来两个组件实例，也就是通过<my-component>调用，创建的两个实例

component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 5

显然当component1.data.b发生改变时，我们是不希望component2.data.b也发生改变的
我们需要将实例都能拿到唯一的data方法

var MyComponent = function() {
  this.data = this.data()
}
MyComponent.prototype.data = function() {
  return {
    a: 1,
    b: 2,
  }
}

这样每一个实例的data属性都是独立的，不会相互影响了。所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关

再来看看官网说的：

1. 组件是可复用的Vue实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods
2. 每个组件都会各自独立维护它的 data。
3. 你每用一次组件，就会有一个它的新实例被创建。
4. 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝