1、数据 ————> Dom
- 通过
compile
解析指令和数据,为其添加watcher
watcher
触发对于的get
方法,使其进行依赖收集,把对应的watcher
进行收集- 当数据发送变化的时候,触发
set
方法,使其通知watcher
进行视图更新
2、Dom ————> 数据
- 通过
compile
解析指令和数据 - 监听Dom
input
等更新动作,当触发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-model
、v-text
、{{}}
等等标识和指令。然后获取绑定数据的值,替换掉标识的内容,并进行数据的变化监听watcher
。 当再有值发生变化时,可以及时通知其修改对应dom元素。
如何实现的 往这看: https://github.com/muwoo/blogs/blob/master/src/Vue/5.md