雙向資料繫結原理

1. 新建vue例項

var data = {
        text:'hello world!'
    };
    var vm = new Vue({
        el:'#app',
        data
    });

2. 將vue例項中的el HTML模板渲染進DOM

 function nodeToFragment(node,vm) {
        var frag = document.createDocumentFragment(),//建立DocumentFragment片段
            child;
        while
 
(child = node.firstChild){//依次取node的子節點將其新增到frag中，
            compile(child,vm);//新增到DOM之前需對child和Vue例項進行繫結以監聽彼此的變化
            frag.appendChild(child);//此方法會同時刪除node中的child節點
        }
        return frag;
    }

    var dom = nodeToFragment(document.getElementById(id),this);
document.getElementById(id).appendChild(dom);//將上面返回的節點新增進DOM
 

3. 將vue例項中的el HTML模板渲染進DOM，compile詳解

function compile(node,vm) {//node為el的子節點
        var reg = /\{\{(.*)\}\}/,// .為匹配除\r\n之外的任意單個字元，*為匹配前面字元任意多次
            name;
        //元素節點
        if(node.nodeType == 1){
            var attr = node.attributes;
            for(var i = 0; i<attr.length; i++){//遍歷el的子節點的屬性，若其有v-model屬性，變從vm.data中取v-model屬性對應的值value，將value作為el的子節點的value|innerHTML值，因為v-model一般對應input元素
 

                if(attr[i].nodeName == 'v-model'){
                VModelEle.push(node);
                    name = attr[i].nodeValue;
                    node.value = vm.data[name];
                    node.innerHTML= vm.data[name];

                    node.addEventListener('input',function (e) {
                        vm.data[name] = e.target.value;
                    });//此處已假定node為input元素，監聽此input，若其value有變化則將其反映到vm.data的name中，name為'v-model'屬性對應的nodeValue。到這裡，已經實現了DOM到vm.data的繫結。
                    new Watcher(vm,node,name);//這一步實現vm.data到DOM的繫結
                    node.removeAttribute('v-model');//從node中刪除v-model屬性。
                    break;
                }
            }
        }
        //若node為文字節點，判斷文字節點的值是不是{{}}這種形式。
        if(node.nodeType == 3){
            if(reg.test(node.nodeValue)){
                name = RegExp.$1;//RegExp為全域性物件，$1-$9為最新匹配到的9個正則表示式中帶括號的項，只能儲存最新9個
                name = name.trim();//取reg = /\{\{(.*)\}\}/中括號內匹配到的值，name在vm.data中也有
                new Watcher(vm,node,name);//為vm.name新增監聽器，實現從vm到DOM的繫結
            }
        }
    }

4. 為vm.name新增監聽器,new Watcher(vm,node,name)

• Dep方法詳情

 function Dep() {
        this.subs = [];
    }
    Dep.prototype = {
        addSub:function (sub) {
            this.subs.push(sub);//sub為Watcher例項
        },
        notify:function () {
            this.subs.forEach(function (sub) {
                sub.update();//通知所有Watcher更新DOM
            })
        }
    };

• Watcher方法詳情

 function Watcher(vm,node,name) {
        Dep.target = this;
        this.name = name;
        this.node = node;
        this.vm = vm;
        this.update();//每次new Watcher時都要用vm.data[this.name]資料更新this.node.nodeValue，即實現vm.data到DOM的繫結。
        Dep.target = null;
    }
    Watcher.prototype = {
        update:function () {
            this.node.nodeValue = this.vm.data[this.name];
        }
    };

• 為vm.data中的每個資料重寫其Object.defineProperty中的set和get方法

 function observe(obj) {
        Object.keys(obj).forEach(function (key) {
            defineReactive(obj,key,obj[key]);
        })
    }
  function defineReactive(obj,key,val){
//defineReactive即為每個data屬性新增setter和getter，當在外部重新為data新增新屬性時，還會呼叫此方法，介面為Vue.$set(obj,kay,value);。
        var dep = new Dep();

        Object.defineProperty(obj,key,{

        //因為讀取vm.data的地方比較多，比如compile方法中的node.value =vm.data[name];node.innerHTML= vm.data[name];而只有第一次為vm.data[name]新增Watcher時才需將此Watcher新增進Dep的subs中,因為new Watcher會執行Watcher的update方法，其中會讀取this.vm.data[this.name]。

            get:function () {
                if(Dep.target){
                    dep.addSub(Dep.target);
                }
                return val;
            },
            //當重寫vm.data中的屬性時，就重置vModelEles中元素的value，vModelEles為所有有v-model屬性的元素
            set:function (value) {
                for(var ele in vModelEles){
                    vModelEles[ele].value = value;
                }
                if(value == val) return;
                //若兩次值不同，將呼叫dep.notify方法，啟動所有Watcher，更改nodeValue
                val = value;
                dep.notify();
                console.log(val);
            }
        });
    }

雙向資料繫結原理總結

• 從DOM到vm.data很簡單，即addEventListener監聽DOM的變化，將其值寫到vm.data中即可。
• 從vm.data到DOM：
  
  • 為出現在DOM中的vm.data中的每個元素新增Watcher，所有的Watcher都存放在Dep的subs中
  • 每當vm.data有變化就呼叫Dep的notify方法，即取出所有subs中的Watcher，呼叫Watcher的updata方法，更新DOM