用vue重构todo

vue

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的背后