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

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

解析

vue中data必须是函数是为了保证组件的 独立性 和 可复用性。
data是一个函数，组件实例化的时候会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不受影响。

实例

假设data为对象时

// 创建一个组件
var Component= function() {
}
Component.prototype.data = {
  a: 1,
  b: 2
}

// 使用组件
var component1 = new Component()
var component2 = new Component()
component1.data.b = 3
component2.data.b   // 3

为函数时

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

// 使用组件
var component1 = new Component()
var component2 = new Component()
component1.data.b = 3
component2.data.b   // 2

结论：data为函数return以后创建新的 分配一个内存地址 避免相互影响。