vue动态绑定原理

参考网址：
1.https://www.jianshu.com/p/f194619f6f26?from=singlemessage&isappinstalled=0
2.http://www.cnblogs.com/kidney/p/6052935.html

四大步骤

==1.监听器Observer==：用来劫持监听所有的属性，主要运用Object.Proprety属性来监听数据。如果有改变时，就通知订阅器，由订阅器来通知所有的订阅者。

==2.订阅器Dep==: 用来管理所有的订阅者，主要是一个数组，保存所有的订阅者

==3.订阅者Watcher==: 每一个watcher都有一个更新函数Update，当接收到订阅器的通知改变时，就会执行update函数，从而更新视图

==4.解析器Compile==: 扫描和解析每个节点的相关指令（v-model, v-on等v-指令），如果存在v-model，v-on等指令，解析器compile就会初始化这些模板数据，使之可以页面首次打开时把vue实例的数据显示在视图上，然后初始化相应的订阅者Wather

完整流程

下面代码的实现流程：
可以从这个Vue函数开始入手

        function Vue(options){
            console.log(this); //this是指向实例对象
            this.data = options.data;
            var data = this.data;
            observe(data,this);  //第一步
            var id = options.el;
            var dom = nodeToFragment(document.getElementById(id),this); //第二部
            document.getElementById(id).appendChild(dom);
        }
        var vm = new Vue({
            el: 'app',
            data:{
                text:'hello world'
            }
        })

第一步：创建一个observe去监听vue的实例vm中data的所有属性

第二步：调用nodeToFragment()
①==劫持==id=‘app’的元素下的所有子节点。(后面对于DOM的操作都在这里进行操作，最后更新完成再更新到我们真正的DOM树上，避免对DOM的反复操作)
②在这里调用解析器compile

第三步：compile()
①遍历dom中节点是否有v指令属性，有的话就对视图进行==初始化==(如：把上面的text:‘hello world’初始化到的value中)
②为所有有v指令的节点==创建一个watcher==，并把对应的动态绑定属性值传过去
compile中与Observer的联系：
③在初始化的过程中，就必定会调用到我们observe的get方法，因此==在Observe这里把watcher添加到订阅器Dep中==
④在compile中我们还会设置对事件的监听(如input事件),执行了对视图中的数据修改->反映到model数据中(调用observer的set方法)

第四步：Observer通知订阅器Dep，数据值已修改。Dep.notify()通知所有的watcher去更新视图

动态绑定测试代码

    


     

        
        {{ text }}