Vue响应式原理

原创 奔跑的小前端 随笔 待整理 210阅读 2018-04-27 11:44:37 举报

Vue.js 一个MVVM的框架,在这个框架里面有一些很不错的功能,其中就有它的“响应式系统”, 比如你在页面上绑定一个变量,你在函数里面改变了,页面就立刻呈现了出来,是不是很神奇的样子,当然我们是基于vuejs上实现的,如果你要自己实现怎么办呢?纸上谈兵不如实战一下

在 observer 的过程中会注册 get 方法,该方法用来进行「依赖收集」。在它的闭包中会有一个 Dep 对象,这个对象用来存放 Watcher 对象的实例。其实「依赖收集」的过程就是把 Watcher 实例存放到对应的 Dep 对象中去。get 方法可以让当前的 Watcher 对象(Dep.target)存放到它的 subs 中(addSub)方法,在数据变化时,set 会调用 Dep 对象的 notify 方法通知它内部所有的 Watcher 对象进行视图更新。

这是 Object.defineProperty 的 set/get 方法处理的事情,那么「依赖收集」的前提条件还有两个:

触发 get 方法;
新建一个 Watcher 对象。
这个我们在 Vue 的构造类中处理。新建一个 Watcher 对象只需要 new 出来,这时候 Dep.target 已经指向了这个 new 出来的 Watcher 对象来。而触发 get 方法也很简单,实际上只要把 render function 进行渲染,那么其中的依赖的对象都会被「读取」,这里我们通过打印来模拟这个过程,读取 test 来触发 get 进行「依赖收集」。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复