摘要：订阅者的实现如下将自己添加到订阅器的操作缓存自己强行执行监听器里的函数释放自己到此为止，简单版的设计完毕，这时候我们需要将和关联起来，就可以实现一个简单的双向数据绑定了。同样使用数据劫持。。

简单说就是在数据和UI之间建立双向的通信通道，当用户通过Function改变了数据，那么这个改变也会立即反映到UI上；或者说用户通过UI的操作也会随之引起对应的数据变动。
Vue是如何实现双向数据绑定的？数据劫持？什么意思呢？太笼统了。与其说是数据劫持，更应该说是对象数据对象的setter和Getter实现劫持。但是Object.defineProperty仅仅是实现了对数据的监控，后续实现对UI的重新渲染并不是它做的，所以这里还涉及到发布-订阅模式；过程是，当监控的数据对象被更改后，这个变更会被广播给所有订阅该数据的watcher，然后由该watcher实现对页面的重新渲染。
步骤：

首先要对数据进行劫持，所以我们需要设置一个监听器Observer，用来监听所有的属性。
如果属性发生变化，就需要告诉订阅者Watcher看是否需要更新。
订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。
还需要一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行相应的更新函数，从而更新视图。
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据及初始化相应的订阅器。

流程图如下：

Observer是一个数据监听器，其实现核心方法就是Object.defineProperty().如果要对所有属性都进行监听的话，那么可以通过递归方法遍历所有属性值，并对其进行Object.defineProperty()处理。

function defineReactive(data,key.val){
    observe(val);//递归遍历所有子属性
    Obejct.defineProperty(data,key,{
        enumerable:true,
        configurable:true,
        get:function(){
            return val;
        },
        set:function(newVal){
            val = newVal;
            console.log("属性"+key+"已经被监听了")
        }
    })
}
function observe(data){
    if(!data || typeof data !=="object"){
        return;
    }
    Object.keys(data).forEach(function(key){
        defineReactive(data,key,data[key])
    })
}
var library={
    book1:{
        name:""
    },
    book2:""
}
observe(library);
library.book1.name="123";
library.book2="456"

思路分析中，需要创建一个可以容纳订阅者的消息订阅器Dep，订阅器Dep主要负责收集订阅者，然后再属性变化的时候执行对应订阅者的更新函数。所以显然订阅者需要有一个容器，这个容器就是list，将上面的Observer稍微改造下，植入消息订阅者：

function defineReactive(data,key,val){
    observe(val)//递归遍历所有子属性
    var dep = new Dep();
    Object.defineProperty(data,key,{
        enumerable:true,
        configurable:true,
        get:function(){
            if(是否需要添加订阅者){
                dep.addSub(watcher);//在这里添加一个订阅者
            }
            return val;
        },
        set:function(newVal){
            if(val === newVal){
                return;
            }
            val = newVal;
            console.log("属性"+key+"已经被监听了");
            dep.notify();//如果数据变化，通知订阅者
        }
    })
}
function Dep(){
    this.subs = [];
}
Dep.prototype={
    addSub:function(sub){
        this.subs.push(sub);
    },
    notify:function(){
        this.subs.forEach(function(sub){
            sub.update();
        })
    }
}

从代码上看，我们将订阅器Dep添加一个订阅者设计在getter里面，这是为了让Watcher初始化进行触发，因此需要判断是否需要添加订阅者。在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新函数。到此，一个比较完整的Obsever已经实现了，接下来我们开始设计Watcher。

订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中，那该如何添加呢？我们已经知道监听器Observer是在get函数执行了添加订阅者Watcher的操作的，所以我们只要在订阅者Watcher初始化的时候触发对应的get函数去执行添加订阅者操作即可，那要如何触发get的函数呢？只要获取对应的属性值就可以触发了，原因就是我们使用了Obejct.defineProperty()进行数据监听。这里还有一个细节点需要处理，我们只要在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了。订阅者Watcher的实现如下：

function Watcher(vm,exp,cb){
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();//将自己添加到订阅器的操作
}
Watcher.prototype={
    update:function(){
        this.run();
    },
    run:function(){
        var value = this.vm.data[this.exp];
        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.vm.data[this.exp]//强行执行监听器里的get函数
        Dep.target = null;//释放自己
        return value;
    }
}

到此为止，简单版的Watcher设计完毕，这时候我们需要将Observer和Watcher关联起来，就可以实现一个简单的双向数据绑定了。
简单的例子：

  
  
  
  


  
{{name}}

虽然上面已经实现了一个双向数据绑定的例子，但是整个过程都没有去解析dom节点，而是直接固定某个节点进行替换数据的，所以接下来需要实现一个解析器Compile来做解析和绑定工作。解析器Compile实现步骤：
1.解析模板指令，并替换模板数据，初始化视图。
2.将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器
为了解析模板，首先需要获取dom元素，然后对含有dom元素上含有指令的节点进行处理，因此这个环节需要对dom操作比较频繁，所以可以先建一个fragment片段，将需要解析的dom节点存入fragment片段里再进行处理：

function nodeToFragment(el){
    var fragment = document.createDocumentFragment();
    var child = el.firstChild;
    while(child){
        //将Dom元素移入fragment中
        fragment.appendChild(child);
        child = el.firstChild
    }
    return fragment;
}

接下来需要遍历各个节点，对含有相关指定的节点进行特殊处理，这里先处理最简单的情况，只对带有{{变量}}这种形式的指令进行处理。

function compileElement(el){
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node){
        var reg = /{(.*)}}/;
        var text = node.textContent;
        if(self.isTextNode(node)&®.test(text)){
            self.compileText(node,reg.exec(text)[1])
        }
        if(node.childNodes&&node.childNodes.length){
            self.compileElement(node);//继续递归遍历子节点。
        }
    })
}
function compileText(node,exp){
    var self = this;
    var initText = this.vm[exp];
    this.updateText(node,initText);
    new Watcher(this.vm,exp,function(value){
        self.updateText(node,value);
    })
}
function (node,value){
    node.tetxContent = typeof value =="undefined"?"":value;
}

获取到最外层节点后，调用compileElement函数，对所有子节点进行判断，如果节点是文本节点且匹配{{}}这种形式指令的节点就开始进行变异处理，编译处理首先需要初始化视图数据，对应上面所说的步骤1，接下来需要生成一个并绑定更新函数的订阅器，对应上面所说的步骤2.这样就完成指令的解析、初始化、编译三个过程，一个解析器Compile也就可以正常的工作了。为了将解析器Compile与监听器Obsever和订阅者Watcher关联起来，我们需要再修改一下类SelfVue函数：

function SelfVue(options){
    var self = this;
    this.vm = this;
    this.data = options;
    Object.keys(this.data).forEach(function(key){
        self.proxyKeys(key);
    })
    observe(this.data);
    new Compile(options,this.vm);
    return this;
}

createDocumentFragment:
创建一个新的空白的文档片段。
语法：

let fragment = document.createDocumentFragment();

fragment是一个指向空DocumentFragment对象的引用。DocumentFragment是DOM节点。它们不是主dom数的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流。因此使用文档片段通常会带来更好的性能。

  
  
  
  


  

    
{{title}}
    
{{name}}
  

代码分析：

1.new SelfVue() 做了三件事：1.使用Object.definePrototype代理让访问selfVue的属性代理为访问selfVue.data的属性。2.同样使用Object.definePrototype数据劫持。3.new Compile()。