vue组件中的data为什么必须是函数?

3,069 阅读2分钟

可在源码中找到答案:src/corn/instance/state.js    (initData方法中)

  • 首先我们熊源码中找一下答案,贴出一张源码图

源码中判断了data是否是个函数,如果是函数,就会使用getData()方法执行以下,并将执行后的结果作为最后的值,否则呢,就会直接使用用户自己设置的data

大家看下下边的代码片段,对data是一个函数有何猜想:

Vue.component('comp'{
    data:{count:1}
})

如果data是一个对象,那么就会走源码中的else代码,直接将用户传入的data进行使用,如果有多个组件,就会造成data数据共享,这样会形成数据污染。

如果执行上边例子的代码,代码就会抛出警告:说这个data必须是一个函数;

结论:为了使每一个组件的状态相互不干扰,不形成数据污染,data必须是一个工厂函数。

那么第二个问题来了,为什么在vue组件中的data必须使一个函数,而在vue的根实例中data就没有显示呢?
1. 创建根实例的时候使用new的方式只能创建一个,是一个单例,不会像vue组件实例可以创建很多个,就不会发生vue组件实例中的数据污染,相互干扰。

2. 可以看一下源码:corn/util/option.js

首先判断下是否是vue组件,那么执行mergeDataOrFn方法的时候就不会传第三个参数  vm实例,所以就会进行function的校验,但是如果使根实例的时候,在执行mergeDataOrFn方法的时候传第三个参数,也就是vm实例,所以就会躲避了function的校验;所以综上所述,可以有两个理由解释了为什么data根实例的data是没有限制的。

散会~~~~~