我们知道 在Vue中 通常会传入一个data的属性,它可以是一个对象,也可以是一个函数。(至于为什么有两种写法可以看我写的博客)
那么,在Vue的源码中,它是怎么被解析的呢,一起来看一下。
直接上源码
这里是一个initData的方法,传入的是vm实例 也就是在Vue中的this,在哪里传入的呢?接下来来看
这是源码中一个initState的方法 ,判断传入对象中有没有data属性,有的话就开始执行initData方法。同理,这里还有其他的 比如props methods 等方法。
所以我们也可以从中知道 props的数据优先级是高于data中的,毕竟是父亲传下来的东西,肯定比自己的重要。
我们先不看这个判断中的else部分,那个是对于一些异常的处理。
我们来看initData方法:
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
定义一个data变量,判断类型,如果 是函数,执行getData方法,否则直接赋值。这个getData是什么?
不用想太多,就当做是直接执行了data这个函数吧。当然,需要call入vm,或者是this。
这就是data 的解析。也不会说很难吧~~