Vue双向数据绑定浅析

1、数据 ————> Dom

  1. 通过compile解析指令和数据,为其添加watcher
  2. watcher 触发对于的get方法,使其进行依赖收集,把对应的watcher进行收集
  3. 当数据发送变化的时候,触发set方法,使其通知watcher 进行视图更新

2、Dom ————> 数据

  1. 通过compile解析指令和数据
  2. 监听Dominput等更新动作,当触发dom更新时,在对应回调函数中更新实例vm中的数据值

这里面有五个要点:

1、如何实现 $options参数处理

2、如何实现 observer数据劫持

3、如何实现 Dep订阅器

4、如何实现 Watcher观察者

5、如何实现 基础的compile编译

(1)数据劫持,前面已经说过了,我们需要为我们的定义的data参数进行observer   observer的主要功能是对传入的数据进行过滤,判断是否需要进行数据劫持。

(2)Dep订阅器  里面需要有收集需求和联系方式的功能,也需要有通知的功能(notify)

(3)watcher观察者  包含接受通知的功能 以便于dep建立连接 

(4)compile编译   options中的el 参数,为我们指定了我们需要编译哪些内容,而我们要做的仅仅是解析出通过v-modelv-text{{}}等等标识和指令。然后获取绑定数据的值,替换掉标识的内容,并进行数据的变化监听watcher。 当再有值发生变化时,可以及时通知其修改对应dom元素。

如何实现的 往这看: https://github.com/muwoo/blogs/blob/master/src/Vue/5.md

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值