Vue雙向數據綁定原理解析

基本原理

Vue.採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter和getter，數據變更時發佈消息給訂閱者，觸發相應函數的回調。

思路整理

要實現mvvm的雙向綁定，須要實現以下幾點：

1. 實現一個數據監聽器Observer，可以對對象的全部屬性進行監聽，發生變化時拿到最新值通知訂閱者
2. 實現一個解析器Compile，對每一個子元素節點的指令進行掃描和解析，根據模板指令替換數據，初始化視圖以及綁定相應的回調函數；
3. 實現一個Watcher，做爲Observer和Compile的橋樑，可以訂閱屬性變更的通知，執行指令綁定的回調函數，更新視圖
4. mvvm的入口，整合以上三者

流程圖以下：

分佈實現

1. MVVM.js

function MVVM(options) {
    this.$options = options || {};
    var data = this._data = this.$options.data;
    var me = this;

    // 數據代理
    // 實現 vm.xxx -> vm._data.xxx
    Object.keys(data).forEach(function(key) {
        me._proxyData(key);
    });
    // 代理計算屬性
    // 一樣經過Object.defineProperty進行劫持
    this._initComputed();

    observe(data, this);

    this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
    $watch: function(key, cb, options) {
        new Watcher(this, key, cb);
    }
}

MVVM入口文件，整合Observer/Compile/Watcher三者，達到數據變化->更新視圖；視圖變化->數據變動的雙向綁定效果。（結合鉤子函數，理解Vue生命週期中各個階段的做用）

2. Observer.js

function Observer(data) {
    Object.keys(data).forEach(function() {
        defineReactive(data, key, data[key]);
    });
}
function defineReactive (data, key, val) {
    var dep = new Dep();
    var childObj = observe(val);

    Object.defineProperty(data, key, {
        enumerable: true, // 可枚舉
        configurable: false, // 不能再define
        get: function() {
            if (Dep.target) {
                dep.depend();
            }
            return val;
        },
        set: function(newVal) {
            if (newVal === val) {
                return;
            }
            val = newVal;
            // 新的值是object的話，進行監聽
            childObj = observe(newVal);
            // 通知訂閱者
            dep.notify();
        }
    });
}

對須要監測的對象的每一個屬性進行遞歸遍歷，經過Object.defineProperty設置setter和getter。當設置新的屬性值時，觸發相應的setter，通知訂閱者。

function Dep() {
    this.id = uid++;
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    depend: function() {
        Dep.target.addDep(this);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

訂閱者模式，每一個屬性維護一個Dep，記錄本身的訂閱者(即watcher)，notify通知每一個訂閱者執行相應的update方法，更新視圖。

3. Compile.js

Compile作了兩件事情：

1. 解析模板指令，替換變量，初始化渲染視圖；
2. 生成一個watcher，註冊回調函數，添加監聽數據的訂閱者，數據變更時，更新視圖

解析流程以下：

1. 將DOM轉成文檔碎片fragment，提高查詢效率
2. 遍歷全部元素節點及其子節點，調用對應的指令渲染函數渲染，並調用對應的指令更新函數進行綁定
3. 將fragment添加回真實的DOM中

遍歷元素

function compileElement (el) {
    var childNodes = el.childNodes,
        me = this;
    [].slice.call(childNodes).forEach(function(node) {
        var text = node.textContent;
        var reg = /\{\{(.*)\}\}/;
        // 解析元素節點
        if (me.isElementNode(node)) {
            me.compile(node);
        // {{}}替換變量
        } else if (me.isTextNode(node) && reg.test(text)) {
            me.compileText(node, RegExp.$1);
        }
        // 遞歸遍歷子節點
        if (node.childNodes && node.childNodes.length) {
            me.compileElement(node);
        }
    });
}

編譯元素節點

compile: function(node) {
    var nodeAttrs = node.attributes,
        me = this;
    [].slice.call(nodeAttrs).forEach(function(attr) {
        // 指令以v-xxx命名
        // <span v-html="content"></span>
        var attrName = attr.name; // v-html
        if (me.isDirective(attrName)) {
            var exp = attr.value; // content
            var dir = attrName.substring(2);
            // 事件指令
            if (me.isEventDirective(dir)) {
                compileUtil.eventHandler(node, me.$vm, exp, dir);
                // 普通指令
            } else {
                compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
            }
            node.removeAttribute(attrName);
        }
    });
}

指令處理與更新函數

var compileUtil = {
    html: function(node, vm, exp) {
        this.bind(node, vm, exp, 'html');
    },
    
    bind: function(node, vm, exp, dir) {
        var updaterFn = updater[dir + 'Updater'];
        // 第一次初始化視圖
        updaterFn && updaterFn(node, this._getVMVal(vm, exp));
        // 實例化Watcher，添加訂閱者
        new Watcher(vm, exp, function(value, oldValue) {
            // 屬性變化的視圖更新函數
            updaterFn && updaterFn(node, value, oldValue);
        });
    },
}

var Updater = {
    htmlUpdater: function(node, value) {
        node.innerHTML = typeof value == 'undefined' ? '' : value;
    }
}

4. Watcher.js

Watcher做爲Observer與Compile之間通訊的橋樑，屬性變化的訂閱者，作了以下的事情：

1. 自身實例化時在屬性訂閱器集合dep裏添加本身
2. 自身需有update方法
3. 調用dep.notice時，watcher調用自身的update ,觸發Compile中定義的回調

function Watcher(vm, expOrFn, cb) {
    this.cb = cb;
    this.vm = vm;
    this.expOrFn = expOrFn;
    this.value = this.get();
}

Watcher.prototype = {
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.get();
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal);
        }
    },
    get: function() {
        Dep.target = this;
        var value = this.getter.call(this.vm, this.vm);
        Dep.target = null;
        return value;
    }
};

這裏須要注意的點是，實例化watcher的時候，調用get方法，經過Dep.target = curInstance，強行觸發獲屬性值的getter方法，在屬性的訂閱器中添加當前watcher實例。

小結

雙向綁定的原理很簡單，經過數據劫持，當設置新屬性值的時候經過訂閱者更新視圖；編譯指令，替換變量，同時綁定更新函數到訂閱者；對應事件綁定調用addEventListener進行監聽。

參考文章

剖析Vue原理&實現雙向綁定MVVM