为什么 Vue 中的 data 属性是一个函数而不是一个对象 - 鑫的第七章 - 沸点 - 掘金

前端工程师

#每天一个知识点#
为什么 Vue 中的 data 属性是一个函数而不是一个对象？
实例和组件定义 data 的区别：
vue 实例的时候定义 data 属性既可以是一个对象，也可以是一个函数；
而组件中定义 data 属性，只能是一个函数，如果为组件 data 直接定义为一个对象，会出现警告信息。

那为什么只有组件中不能定义成对象呢，在 vue 中我们定义好一个组件，最终都会通过Vue.extend() 构成组件实例，那我们就模仿组件构造函数，定义data属性，采用对象的形式创建两个组件实例：
const componentA = new Component()
const componentB = new Component()
想一下，修改 componentA 组件中属性的值，componentB 中的值也会发生改变。
这就是对象共用了同一个内存地址，componentA 修改的内容，同样对 componentB 产生了影响。
如果我们采用函数的形式，就不会出现这种情况。

简单来说，就是在根实例对象 data 可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。
组件实例对象 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data，产生数据污染。

展开

技术交流圈