Vue 中 data 为什么必须是一个函数

为什么 Vue 中的 data 必须是个函数？

官方文档的解释如下：

为什么会出现上述“影响到其它所有实例”的情况呢？

其实这个问题取决于 JS 原型链知识，而非 Vue
我们先来看不是函数的情况：

function Component() {
}

Component.prototype.data = {
  name: 'Morty',
  age: 14,
}

var componentA = new Component()
var componentB = new Component()

componentA.data.age = 40

console.log(componentA, componentB)  // 40 40

可以看到，componentA 和 componentB data 之间指向了同一个内存地址，age 都变成了 40，导致了问题
因此，data 如果单纯的写成对象形式，会使得所有组件实例共用了一份 data，造成一个变了全都会变的结果
接下来我们用函数改造以上代码：

function Component() {
  this.data = this.data()
}

Component.prototype.data = function () {
  return {
    name: 'Morty',
    age: 14,
  }
}

var componentA = new Component()
var componentB = new Component()

componentA.data.age = 40

console.log(componentA, componentB)  // 40 14

这就很好的解释了为什么 Vue 组件中的 data 需要用函数了，当 data 是函数的时候，每一个实例的 data 属性都是独立的，互不影响

注意：new Vue 的实例是不会被复用的，因此不存在引用对象的问题

总结

Vue 中的 data 必须是个函数，因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变
简单来说，就是为了保证组件的独立性和可复用性，如果 data 是个函数的话，每复用一次组件就会返回新的 data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响