[关闭]
@lizlalala 2016-09-22T07:10:38.000000Z 字数 903 阅读 893

用vue重构todo

vue


todo via vue@luchenCodePen

v-model的双向绑定实际上也是用get-set(observer) 来实现的。对于{{}}的语句进行编译,其实是代理到_data内部属性,vm.message === vm._data.message,转变成为类似于上面的computed属性中的key,每个都有自己的get set方法。

其中,需要实现observer。对message创建observe对象new Observer({message: 'Hello World' }) ,实例化dep对象,用于下面的收集依赖,。紧接着
通过convert方法(Observer.protoype.convert())将属性变成reactive的,在这个方法中实现get,set
- get用于收集依赖于message的其他key
- set用于监听message变化后通知这些依赖,依赖的收集我们说过,是用dep实现的,具体来说是创建了一个subs数组来保存订阅者。

以上为init的一些操作,然后就到了mount部分:compile+link.compile主要是对el,template里面的内容进行解析,如{{}}需要创建元素,这边是textnode,然后append到fragment中(高性能javascript也提到过,是一个避免多次重绘重排的好方法)。link主要进行的操作就是实例化指令(这边是text指令),将指令和新建的元素(textnode)link在一起,然后将元素替换到DOM tree中去。

第一次渲染,会通过watcher去获得表达式"message"的计算值,更新到之前新建的TextNode中去,完成在页面上渲染:
获取watcher数据的时候,会同时把它们加入到变化的订阅者集合中(即dep.subs数组中),一旦数据进行了变动,就会通过dep.notify() -> watcher.update() -> directive.update() -> textDirective.update(),完成DOM的更新。

references

  1. Vue.js源码(1):Hello World的背后
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注