Vue的双向绑定v-model

继续理解vue的双向绑定

首先，双向绑定的作用是，为了达到view --> model / model --> view 从而达到mvvm，为了实现这个效果，应分为以下三步进行操作。

1. v-model，{{...}}，实现输入框与文本节点与data的绑定
2. view --> model ，input输入框改变时，改变数据模型（v-text或{{}}）中的数据
3. model --> view ， 数据模型中的数据，因为各种操作而改变时，input中的值需要自动改变

1，使用文档片段来处理节点，将挂载的目标子节点劫持之后再返回到视图中

DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到DOM中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。使用DocumentFragment处理节点，速度和性能远远优于直接操作DOM。Vue进行编译时，就是将挂载目标的所有子节点劫持（真的是劫持）到DocumentFragment中，经过一番处理后，再将DocumentFragment整体返回插入挂载目标。

2，利用访问器属性，实现view改变，改变model

利用访问器属性的set监听，当view发生改变时，将data中的text劫持为vm的访问器属性(因为访问器属性会被优先访问，与其同名的属性会被忽略，所以谓之劫持)

Object.defineProperty(obj，"a"，{
      get:function(){}，
      set:function(newVal){
            //更新node text属性的值
      }
})

当我们在输入框输入数据的时候，首先触发input事件（或者keyup、change事件），在相应的事件处理程序中，我们获取输入框的value并赋值给vm实例的text属性。我们会利用defineProperty将data中的text劫持为vm的访问器属性，因此给vm.text赋值，就会触发set方法。在set方法中主要做两件事，第一是更新属性的值，第二留到任务三再说。

3，发布 - 订阅者模式

需要监听当model中的data发送改变时，改变view。首先，这里的订阅者是v-text和v-model或{{}}等等，每当vm中返回一个新的data，则为此data添加一个dep主题对象，当有指令绑定了此data则生成一个watcher(暂时不添加到Dep)，当set(作为发布者)，被触发之后，通知订阅者watcher，执行相应操作。watcher做了以下事情

1. 将自己赋给了一个全局变量Dep.target
2. 进而触发了watcher自身的get方法，自身get方法获取了对应属性的值，从而触发了对应属性的get方法
3. 对应属性的get方法检测到全局Dep属性非空后，将该watcher添加到该data的dep主题对象中，然后返回了属性的值到watcher.value中
4. 再然后wather的get方法继续执行下一步，将this.value赋值给this.node.nodeValue，从而更新视图。
5. 最后，将全局变量Dep.target设为null，Dep.target作为watcher和主题对象dep间沟通的唯一桥梁，使用完后要保持为空。

---

给尤大大打call...

---

再次理解Vue的双向绑定v-model和{{ }}

1，首先，由view --> model的改变很好监听，因为有change这种事件的监听，每当input数据变化之后，就动态改变el绑定的data的数据。

2，重点，在vue实例中，每次出现一个新的data对象

第一步，设置发布者，利用Object.defineProperty监听对对象属性的变化，但此时我们做的只是监听了这个值的变化，真正的Watch订阅者还没有添加。

第二步，解析文档模型，每次遇到v-model或者{{}}就新建一个watcher实例，并给他传入update的更新函数，只要执行这个更新函数，视图就会响应地发生改变。

第三步，每次new一个watcher，wathcer将自身缓存在dep.target中，watcher会强行触发发布者的getter函数，getter函数判断dep.target非空后，将watcher添加到Dep中间件的sub数组中去，然后将dep.target设置为空，此时每个需要设置watcher的文档节点都设置好了。

第四步，每次data发生改变时触发setter方法，改变属性值，并触发响应dep的wathcer的之前传进来的update函数，通知对应的订阅者，所有的订阅者update，更新视图中的值。