Vue中的data属性为什么不能是一个对象?

以下引官网原文:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

首先我们需要了解在vue文件的代码被实例化成vue组件的过程需要经历下面这些步骤:

1.vue文件被loader处理,template被编译成render函数,script被编译成一个对象变量
2.将script编译后的对象传入render中,并在render函数中调用vue.createElement(来自vue/src/core/vdom/create-element.js)构建vue组件
3.在createElement中,如果是vue组件的话,通过createComponent(vue/src/core/vdom/create-component.js)构建组件
4.将script编译出来的对象变量通过上下文的$options中取出,并使用Vue.extends(vue/src/core/global-api/extend.js)通过该对象构建出一个新的Vue对象

我们的每一个vue文件经过babel编译,将导出的对象直接替换成了一个对象变量,然后将这个变量传入到对应的组件构造函数中。因此,也就产生了引用共享的问题(所有js对象皆引用)。

你可能感兴趣的:(Vue中的data属性为什么不能是一个对象?)