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

其实这个问题是js的问题,并非是vue的问题

这和原型链的知识有关

我们可以反向推一下,如果vue中的data是一个对象的话会发生什么现象

举例:vue中的data是一个对象

function Component(){
  
}
Component.prototype.data = {
  name:'冯昕',
  age:12,
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)

此时打印结果如下

当组件A修改data中的值是,组件B中data数据也会被修改

举例:vue中的data是一个函数

  function Component() {
    this.data = this.data()
  }
  Component.prototype.data = function () {
    return {
      name: 'jack',
      age: 22,
    }
  }
  var componentA = new Component()
  var componentB = new Component()
  componentA.data.age = 55
  console.log(componentA, componentB)

打印结果如下

当组件A修改data中的值是,组件B中data数据不会被修改

 

接下来就很好解释为什么vue中的data必须要是一个function了,这是为了实现组件的复用,这里使用的是data()函数，data()函数中的this指向的是当前实例本身。

综上所述,vue中的data必须要是一个函数