Vue双向绑定原理（源码深入解析）

• 订阅/发布模式（subscribe&publish）

订阅发布模式（又称观察者模式）定义了一种一对多的关系，
让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。

发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作

Vue的配置

new Vue({
data: {
a: 1
},
computed: {
b: function() {
return this.a + 1;
}
}
})

// 发布者
var pub = {
    publish: function() {
        dep.notify()
    }
}
// 订阅者1，2
var sub1 = { update: function(val) {
// 更新DOM1上的数据
 }
var sub2 = { update: function(val) {
// 更新DOM2上的数据
 }
// 主题对象，比如data对象的属性a
function Dep() {
    this.subs = [sub1, sub2];
}
// a属性值变化之后，使用它的所有地方都要发生变化，比如computed的b就是以是一个订阅者，和模板里的a
Dep.prorotype.notify = function() {
  this.subs.forEach((sub) => {
    sub.update();
})
// 往主题对象，添加新的订阅者
Dep.prorotype.addSub= function() {
  this.subs.push(sub);
}

Vue的源码解析可以分为3步骤

1. 输入框以及文本节点与 data 中的数据绑定
   将模板与data进行替换，最后输出可以渲染有真实数据的Dom（即渲染函数）
2. 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
3. data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。

DocumentFragment

• DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到 DOM 中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。使用 DocumentFragment 处理节点，速度和性能远远优于直接操作 DOM。

• Vue 进行编译时，就是将挂载目标的所有子节点劫持（真的是劫持，通过 append 方法，DOM 中的节点会被自动删除）到 DocumentFragment 中，经过一番处理后，再将 DocumentFragment 整体返回插入挂载目标。

1. 输入框以及文本节点与 data 中的数据绑定，将模板与data进行替换，最后输出可以渲染有真实数据的Dom（即渲染函数）

function Compile(el) {
    if (this.$el) {
    // 将挂载元素里的字节点拷贝到fragment
        this.$fragment = this.node2Fragment(this.$el);
    // 执行编译函数，将模板转成DOM
        this.init();
      // 将替换好真实数据的Dom插入到挂载的元素里
        this.$el.appendChild(this.$fragment);
    }
}
Compile.prototype = {
    // 初始化，执行编译函数
    init: function() { this.compileElement(this.$fragment); },
    //// 将挂载元素里的字节点拷贝到fragment
    node2Fragment: function(el) {
        var fragment = document.createDocumentFragment(), child;
        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
            fragment.appendChild(child);
        }
        return fragment;
    }
    //编译函数，
    compileElement: function(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);
            }
        });
    }
}

2. 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。

3. 发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。

function Compile(el) {
        var childNodes = el.childNodes, me = this;
        [].slice.call(childNodes).forEach(function(node) {
            var text = node.textContent;
            var reg = /\{\{(.*)\}\}/;    // 表达式文本
            // 按元素节点方式监听数据
            if (me.isElementNode(node)) {
                new Watcher(this, node, cb)
                // 按{{}}字符串模板的文本节点方式监听数据
            } else if (me.isTextNode(node) && reg.test(text)) {
                new Watcher(this, node, cb)
            }
            // 遍历子节点，监听数据
            if (node.childNodes && node.childNodes.length) {
                new Watcher(this, childNodes , cb)
            }
        });
}

// 对DocumentFragment里的元素的data对象的属性值进行监听
function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    // 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
    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); // 执行Compile中绑定的回调，更新视图
        }
    },
    get: function() {
        Dep.target = this;    // 将当前订阅者指向自己
        var value = this.vm[exp];    // 触发getter，添加自己到属性订阅器中
        Dep.target = null;    // 添加完毕，重置
        return value;
    }
};
// 这里再次列出Observer和Dep，方便理解
Object.defineProperty(data, key, {
    get: function() {
        // 由于需要在闭包内添加watcher，所以可以在Dep定义一个全局target属性，暂存watcher, 添加完移除
        Dep.target && dep.addDep(Dep.target);
        return val;
    }
    // ... 省略
});
Dep.prototype = {
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update(); // 调用订阅者的update方法，通知变化
        });
    }
};

文章参考：
剖析Vue原理实现双向绑定MVVM
Vue.js双向绑定的实现原理