为什么 data 属性是一个函数而不是一个对象

在我们定义好一个组件的时候，Vue 最终都会通过 Vue.extend() 构成组件实例。

这里我们模仿组件构造函数，定义 data 属性，采用对象的形式：

function Component() {}

Component.prototype.data = {
  count: 0
}

创建两个组件实例：

const componentA = new Component()
const componentB = new Component()

修改 componentA 组件 data 属性的值，componentB 中的值也发生了改变：

console.log(componentB.data.count)  // 0
componentA.data.count = 1
console.log(componentB.data.count)  // 1

产生这样的原因：两者共用了同一个内存地址，componentA 修改的内容同样对 componentB 产生了影响。

如果我们采用函数的形式，则不会出现这种情况（函数返回的对象内存地址并不相同）：

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

Component.prototype.data = function () {
  return {
    count: 0
  }
}

修改 componentA 组件 data 属性的值，componentB 中的值不受影响：

console.log(componentB.data.count)  // 0
componentA.data.count = 1
console.log(componentB.data.count)  // 0

Vue 组件可能会有很多个实例。采用函数返回一个全新 data 的形式，使每个实例对象的数据不会受到其他实例对象数据的污染，防止多个组件实例对象之间共用一个 data。

简单来说：对象形式的 data，多个实例共享同一个引用，会相互影响；函数形式的 data，每个实例都执行一次函数拿到独立的对象，互不干扰。

来源整理自：vue3js.cn 面试官系列

相关文章