vue雙向綁定原理分析

時間 2019-11-10

標籤 vue 雙向綁定原理分析简体版

原文原文鏈接

當咱們學習angular或者vue的時候，其雙向綁定爲咱們開發帶來了諸多便捷，今天咱們就來分析一下vue雙向綁定的原理。html

簡易vue源碼地址：https://github.com/jiangzhenfei/simple-Vuevue

1.vue雙向綁定原理node

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。咱們先來看Object.defineProperty()這個方法：git

var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('我被獲取了')
            return val;
        },
        set: function (newVal) {
            console.log('我被設置了')
        }
})
obj.name = 'fei';//在給obj設置name屬性的時候，觸發了set這個方法
var val = obj.name;//在獲得obj的name屬性，會觸發get方法

已經瞭解到vue是經過數據劫持的方式來作數據綁定的，其中最核心的方法即是經過Object.defineProperty()來實現對屬性的劫持，那麼在設置或者獲取的時候咱們就能夠在get或者set方法裏假如其餘的觸發函數，達到監聽數據變更的目的，無疑這個方法是本文中最重要、最基礎的內容之一。github

2.實現最簡單的雙向綁定數組

咱們知道經過Object.defineProperty()能夠實現數據劫持，是的屬性在賦值的時候觸發set方法，瀏覽器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="demo"></div>
    <input type="text" id="inp">
    <script>
        var obj  = {};
        var demo = document.querySelector('#demo')
        var inp = document.querySelector('#inp')
        Object.defineProperty(obj, 'name', {
            get: function() {
                return val;
            },
            set: function (newVal) {//當該屬性被賦值的時候觸發
                inp.value = newVal;
                demo.innerHTML = newVal;
            }
        })
        inp.addEventListener('input', function(e) {
            // 給obj的name屬性賦值，進而觸發該屬性的set方法
            obj.name = e.target.value;
        });
        obj.name = 'fei';//在給obj設置name屬性的時候，觸發了set這個方法
    </script>
</body>
</html>

固然要是這麼粗暴，確定不行，性能會出不少的問題。app

3.講解vue如何實現函數

先看原理圖性能

3.1 observer用來實現對每一個vue中的data中定義的屬性循環用Object.defineProperty()實現數據劫持，以便利用其中的setter和getter，而後通知訂閱者，訂閱者會觸發它的update方法，對視圖進行更新。

3.2 咱們介紹爲何要訂閱者，在vue中v-model，v-name，{{}}等均可以對數據進行顯示，也就是說假如一個屬性都經過這三個指令了，那麼每當這個屬性改變的時候，相應的這個三個指令的html視圖也必須改變，因而vue中就是每當有這樣的可能用到雙向綁定的指令，就在一個Dep中增長一個訂閱者，其訂閱者只是更新本身的指令對應的數據，也就是v-model='name'和{{name}}有兩個對應的訂閱者，各自管理本身的地方。每當屬性的set方法觸發，就循環更新Dep中的訂閱者。

4.vue代碼實現

4.1 observer實現，主要是給每一個vue的屬性用Object.defineProperty()，代碼以下：

function defineReactive (obj, key, val) {
    var dep = new Dep();
        Object.defineProperty(obj, key, {
             get: function() {
                    //添加訂閱者watcher到主題對象Dep
                    if(Dep.target) {
                        // JS的瀏覽器單線程特性，保證這個全局變量在同一時間內，只會有同一個監聽器使用
                        dep.addSub(Dep.target);
                    }
                    return val;
             },
             set: function (newVal) {
                    if(newVal === val) return;
                    val = newVal;
                    console.log(val);
                    // 做爲發佈者發出通知
                    dep.notify();//通知後dep會循環調用各自的update方法更新視圖
             }
       })
}
        function observe(obj, vm) {
            Object.keys(obj).forEach(function(key) {
                defineReactive(vm, key, obj[key]);
            })
        }

4.2實現compile：

compile的目的就是解析各類指令稱真正的html。

function Compile(node, vm) {
    if(node) {
        this.$frag = this.nodeToFragment(node, vm);
        return this.$frag;
    }
}
Compile.prototype = {
    nodeToFragment: function(node, vm) {
        var self = this;
        var frag = document.createDocumentFragment();
        var child;
        while(child = node.firstChild) {
            console.log([child])
            self.compileElement(child, vm);
            frag.append(child); // 將全部子節點添加到fragment中
        }
        return frag;
    },
    compileElement: function(node, vm) {
        var reg = /\{\{(.*)\}\}/;
        //節點類型爲元素(input元素這裏)
        if(node.nodeType === 1) {
            var attr = node.attributes;
            // 解析屬性
            for(var i = 0; i < attr.length; i++ ) {
                if(attr[i].nodeName == 'v-model') {//遍歷屬性節點找到v-model的屬性
                    var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
                    node.addEventListener('input', function(e) {
                        // 給相應的data屬性賦值，進而觸發該屬性的set方法
                        vm[name]= e.target.value;
                    });
                    new Watcher(vm, node, name, 'value');//建立新的watcher，會觸發函數向對應屬性的dep數組中添加訂閱者，
                }
            };
        }
        //節點類型爲text
        if(node.nodeType === 3) {
            if(reg.test(node.nodeValue)) {
                var name = RegExp.$1; // 獲取匹配到的字符串
                name = name.trim();
                new Watcher(vm, node, name, 'nodeValue');
            }
        }
    }
}

4.3 watcher實現

function Watcher(vm, node, name, type) {
    Dep.target = this;
    this.name = name;
    this.node = node;
    this.vm = vm;
    this.type = type;
    this.update();
    Dep.target = null;
}

Watcher.prototype = {
    update: function() {
        this.get();
        this.node[this.type] = this.value; // 訂閱者執行相應操做
    },
    // 獲取data的屬性值
    get: function() {
        console.log(1)
        this.value = this.vm[this.name]; //觸發相應屬性的get
    }
}

4.4 實現Dep來爲每一個屬性添加訂閱者

function Dep() {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
        sub.update();
        })
    }
}

這樣一來整個數據的雙向綁定就完成了。

5.梳理

首先咱們爲每一個vue屬性用Object.defineProperty()實現數據劫持，爲每一個屬性分配一個訂閱者集合的管理數組dep；而後在編譯的時候在該屬性的數組dep中添加訂閱者，v-model會添加一個訂閱者，{{}}也會，v-bind也會，只要用到該屬性的指令理論上都會，接着爲input會添加監聽事件，修改值就會爲該屬性賦值，觸發該屬性的set方法，在set方法內通知訂閱者數組dep，訂閱者數組循環調用各訂閱者的update方法更新視圖。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。