#每天一个知识点#
为什么 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，产生数据污染。
为什么 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，产生数据污染。
展开
2
点赞