Vue初始化时,对data进行数据绑定

首先,调用 initState() 来初始化 propsmethodsdata 等属性。

当执行到 initData() 时,对 data 进行初始化。首先,会检查 data 中的属性名是否与 propsmethods 中的名字重复,然后调用 observe() 对数据进行响应式处理。

observe() 中,首先检查传入的数据是否为非对象或 VNode 实例,如果是,则不做响应式处理。然后判断 data 是否有 __ob__ 属性,如果有,则说明该 data 已被观察过,直接返回 __ob__ 属性。

如果没有被观察过,则会创建一个 Observer 对象。首先,会为 data 创建一个 dep 对象(依赖收集器)。然后判断 data 是否为数组:

  • 若是数组,则判断该数组是否有 __proto__ 属性,如果有,则通过 __proto__ 操作数组的原型链,覆盖数组默认的七个原型方法,以实现数组的响应式;
  • 若不是数组,则调用 walk(),对对象的每一个属性调用 defineReactive()(实现响应式的核心,原理是通过 Object.defineProperty() 实现响应式)。如果属性的值仍然是对象,则会再次调用 observe() 对其进行递归监听。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值