Vue.js 中的组件中的 data 为什么必须是一个函数？

在 Vue.js 中,组件的 data 必须是一个函数,而不能是一个对象。这是因为:

1. 如果是对象,多个组件实例共享一个 data 对象,相互覆盖。
2. 如果是函数,每个组件实例都拥有 data 对象的一个全新副本,互不干扰。

示例:
对象形式的 data:

js
data: {
  message: 'Hello!'
}

var vm1 = new Vue({ data })
var vm2 = new Vue({ data })

vm1.message = 'Hi!'
console.log(vm2.message) // Hi!

vm1 改变了 message,vm2 的 message 也随之改变, two instances share the same data object。

函数形式的 data:

js
data: function () {
  return { 
    message: 'Hello!'
  }
}

var vm1 = new Vue({ data })  
var vm2 = new Vue({ data }) 

vm1.message = 'Hi!'
console.log(vm2.message) // Hello!

现在两次组件实例拥有 data 对象的完全隔离的副本,改变一个实例的 data 不会影响其他实例。

原因总结:

1. Vue 需要观察 data 的变化来更新视图,如果是对象形式的 data,所有的实例共享一个对象,一个实例对对象的变更会影响其他实例,这显然是不合适的。
2. 函数返回的对象或数组的每个实例都会有属于自己的完整数据副本,彼此不会互相影响。
3. 这也使得数据可以根据组件实例进行定制,更加符合实际需求。