查看: 20|回复: 0

[郑州1910] Vue数据双向绑定原理(”数据劫持” 结合“发布-订阅者”...


19-10-21 19:51:29 | [复制链接]

1

主题

5

帖子

30

积分

菜鸟

Rank: 1

发表于 19-10-21 19:51:29 | 显示全部楼层 |阅读模式
1.   首先需要对oberver的数据对象进行递归遍历(oberver的数据是通过劫持MVVM获取的),包括子对象的属性都加上set和get。这样给该对象的属性赋值式就会触发set,实现监听效(也就是通过Object.defineProperty()实现数据监听
2.   Compile解析模板指令,将模板中的变量换成数据,初始化渲染页面视图,并将每个指令对应的节点绑定到更新函数,添加数据到订阅者。一旦数据有变动,订阅者收到通知,更改视图
3.   Watcher(订阅者)是Observer和Compile之间的通信的桥梁,主要负责:
1)        向Dep(订阅器)里添加订阅者(自己)
2)        自身有update()方法(当数据变动时,修改自身)
3)        当属性变动时,Dep通知Watcher(订阅者),Watcher(订阅者)调用自身update()方法,触发Compile中的绑定的回调
4.   MVVM作为绑定的入口,整合Observer和Compile以及Watcher,通过Observer来监听自己(MVVM)的model数据变化,通过Compile来解析编译模板指令。最终利用Watcher搭起Observer和Compile之间的通信桥梁,实现数据变化(Dep属性值)=>View(视图变化);View(视图变化)=>数据变化(Dep属性值)


<---------------------------------------自我理解------------------------------------------------------>
(说白了就是视图变,数据也变;数据变,视图内容也变)


Vue数据双向绑定

Vue数据双向绑定
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3

GMT+8, 19-11-13 10:25 , Processed in 0.411414 second(s), 40 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表