vue data为什么是一个函数源码分析

为什么data必须是一个函数

• 1. 本质上来说, vue组件实例身上的属性都是从其构造函数的options上面取值的(比如 data methods), 都是在其构造函数的options上面定义的, vue内部会将组件的构造函数的options作为组件的options的原型, 所以在使用的时候会从构造函数的options上面取值
• 2. 如果说data是一个对象的话, 那我们每使用一次组件就会创建出一个组件实例, 组件构造函数的options是其组件实例的options的原型, 所以每一个组件实例就都会去其构造函数的options上面取值使用, 如果一个组件内部修改了data对象, 那就是将构造函数的options里面的data给修改了, 这也就表明了另外一个组件在使用data对象里面的数据时, 数据就已经发生变化了, 另一个组件就会展示出错误的信息
• 3. 如果是一个函数的话, 则每一个组件实例使用时, 都先需要调用这个函数返回一个新的对象进行使用, 一个组件使用时修改了数据, 也只是修改了当前组件data返回的新对象中的数据, 而另一个组件在使用时, 又会创建出新的对象进行使用, 第一个组件实例修改之后并不会影响第二个组件实例的data对象, 所以说组件实例的data必须返回的是一个函数, 要不然就会导致共享变化之后数据的问题
• 4. 深点说就是组件创建时, 其构造函数将当前组件配置对象和全局配置对象进行合并作为构造函数的options, 实例用会将组件构造函数的options作为实例的options的原型
• 5. 那又有人说了, 创建组件虚拟dom时, 不是每创建一个都会调用Vue.extend生成一个新的构造函数吗, 那根据不同构造函数创建出来的实例怎么会互相影响呢? 查看源码得知, 第一次调用Vue.extend是就会给传入的配置对象身上增加一个cid属性, 第二次再进来的时候如果配置对象身上有这个cid, 就返回之前的构造函数, 不会再创建新的构造函数出来
• 6. 构造函数一致, 数据都是定义的构造函数的options上面的, 组件实例中的options对象的原型是构造函数, 这也就决定了data必须是一个函数