vue学习前传(三)

发表于   |   分类于   |  

之前用jquery写过一次todo，最近在学vue,（好吧其实这篇文章放上来的时候已经过了好久了，算是用vue开发项目的前传吧~，后续会慢慢放上项目demo讲解），下面就是用vue重构的todo的demo啦。,可能这边显示有问题，直接戳codepen的链接就好啦。

See the Pen todo via vue by lu (@luchen) on CodePen.

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

其中，需要实现observer。对message创建observe对象

1
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里面的内容进行解析，如

1
{{}}

需要创建元素，这边是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的背后

楼主来更新啦，最近对vuex比较感兴趣，就试着用vuex重构了一下todo，但是比较困惑的是关于v-model的问题。官方给出的建议是将v-model变成一个计算属性，这对于一个普通的变量不失为一个好的方法，但是我这边遇到的问题是，当我列表渲染的时候，里面有v-model，（v-model=”listitem.input”）这种，我该怎么去给它设置set函数？
vuex的版本代码请戳链接todo