从Vue源码中看data属性的使用

我们知道 在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 的解析。也不会说很难吧~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值