Vue 组件中 data 为什么必须是函数？-CSDN博客

其实这跟vue本身设计无关，都是因为js本身的特性带来的。

js的原型链：

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}
复制代码

上面是一个虚拟的组件构造器，真实的组件构造器方法很多

var component1 = new MyComponent()
var component2 = new MyComponent()
复制代码

上面实例化出来两个组件实例，也就是通过调用，创建的两个实例

component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 5
复制代码

可以看到上面代码中最后三句，这就比较坑爹了，如果两个实例同时引用一个对象，那么当你修改其中一个属性的时候，另外一个实例也会跟着改。这怎么可以，两个实例应该有自己各自的域才对。所以，需要通过下面方法来进行处理：

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

这样每一个实例的data属性都是独立的，不会相互影响了。所以，你现在知道为什么vue组件的data必须是函数了吧。