当vue开发经验越来越丰富的时候，就想了解其各种实现原理，其中第一个感兴趣的便是双向数据绑定原理，前后看过不少文档和资料，终于有所收获，此文将详细解析vue双向数据绑定的基本实现思路（非源码）。

###MVVM简介：

1.输入框内容变化时，data 中的数据同步变化。即 view => data 的变化。 2.data 中的数据变化时，文本节点的内容同步变化。即 data => view 的变化。

思路：

• 实现一个监听器 Observer ，用来劫持并监听所有属性，如果属性发生变化，就通知订阅者；基础入门

• 实现一个订阅器 Dep，用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理；

• 实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图；

• 实现一个解析器 Compile，可以解析每个节点的相关指令，对模板数据和订阅器进行初始化。

• 创建一个公共的入口对象（Vue），接收初始化配置，并协调Compile、Observer、Watcher模块，也就是Vue。

一、监听器Observer实现

作用：递归劫持vm.$data中的所有数据，拦截setter和getter。如果数据变更，则发布通知,让所有订阅者更新内容，改变视图。Object.defineProperty详解 玩家详解

class Observer { 
    constructor(data){
        this.data = data
        this.walk(data)
    }
    
    // 遍历walk中所有的数据,劫持 set 和 get方法
    walk(data) {
        // 判断data 不存在或者不是对象的情况
        if(!data || typeof data !=='object') return

        // 拿到data中所有的属性
        Object.keys(data).forEach(key => {
            // 给data中的属性添加 getter和 setter方法
            this.defineReactive(data,key,data[key])
            // 如果data[key]是对象,深度劫持
            this.walk(data[key])
        })
    }

    // 定义响应式数据
    defineReactive(obj,key,value) {
        let _this = this
        let dep = new Dep()  // Dep函数请看下节实现
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable: true,
            get(){
                // 如果Dep.target 中有watcher 对象,则存储到订阅者数组中
                Dep.target && dep.addSub(Dep.target)
                return value
            },
            set(newVal){
                if(value === newVal) return
                value = newVal
                // 如果设置的值是一个对象,那么这个对象也应该是响应式的
                _this.walk(newVal)
                // 发布通知,让所有订阅者更新内容
                dep.notify()
            }
        })
    }
} 

二、订阅器Dep实现

class Dep {
    constructor(){
        // 初始化一个空数组，用来存储订阅者
        this.subs = []
    }

    // 添加订阅者
    addSub(watcher){
        this.subs.push(watcher)
    }
 
    // 通知
    notify() {
        // 通知所有的订阅者更改页面
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}

三、订阅者Watcher实现

class Watcher {
    /**
     * 
     * @param {*} vm 当前的vue实例 
     * @param {*} expr data中数据的名字
     * @param {*} callback  一旦数据改变,则需要调用callback
     */
    constructor(vm,expr,callback){
        this.vm = vm
        this.expr = expr 
        this.callback = callback
        Dep.target = this  // 全局变量 订阅者 赋值
        this.oldValue = this.getVMData(vm,expr)  // 强制执行监听器Observer里的get函数
        Dep.target = null  //全局变量 订阅者 释放
    }

    // 对外暴露的方法,用于更新页面
    update() {
        // 对比expr是否发生改变,如果改变则调用callback
        let oldValue = this.oldValue
        let newValue = this.getVMData(this.vm,this.expr)

        // 变化的时候调用callback
        if(oldValue !== newValue) {
            this.callback(newValue,oldValue)
        }
    }

    getVMData(vm,expr) {
        let data = vm.$data
        expr.split('.').forEach(key => {
            data = data[key]
        })
        return data
    }
}

当我们去实例化一个 watcher 的时候，首先进入 watcher 的构造函数逻辑 在这个过程中会对 vm 上的数据访问，其实就是为了触发数据对象的 getter。

this.oldValue = this.getVMData(vm,expr)

每个对象值的 getter 都持有一个 dep，在触发 getter 的时候会执行this.addSub(Dep.target)，即把当前的 watcher 订阅到这个数据持有的 dep 的 watchers(subs) 中，这个目的是为后续数据变化时候能通知到哪些 watchers 做准备。

完成依赖收集后，还需要把 Dep.target 恢复成上一个状态，即：

Dep.target = null;  // 释放自己

而 update() 函数是用来当数据发生变化时调用 Watcher 自身的更新函数进行更新的操作。 先通过 let newValue = this.getVMData(this.vm,this.expr), 获取到最新的数据,然后将其与之前的oldValue进行比较，如果不一样，则调用更新函数 cb 进行更新。

至此，简单的订阅者 Watcher 设计完毕。（new Watcher()在Compile解析dom节点时调用从而形成绑定关系）

四、Compile核心代码

• 解析指令（属性节点）与插值表达式（文本节点），并替换模板数据，初始化视图；
• 将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图；

mustache(node, vm) {
    let txt = node.textContent
    let reg = /\{\{(.+)\}\}/
    if (reg.test(txt)) {
        let expr = RegExp.$1
         node.textContent = txt.replace(reg, this.getVMData(vm, expr))
         
         // 侦听expr值的变化。当expr的值发生改变时，执行回调函数
        new Watcher(vm, expr, newValue => {
            node.textContent = txt.replace(reg, newValue)
        })
    }
}

更多详见

五、Vue 入口文件

####入口文件所做的事情：

• 把data和methods挂载到根实例中；
• 用Observer模块监听data所有属性的变化
• 如果存在挂载点，则用Compile模块编译该挂载点下的所有指令和插值表达式

// vue.js
class Vue {
    constructor(options={}){
        this.$el = options.el;
        this.$data = options.data;
        this.$methods = options.methods;
        // 将data,methods里面的属性挂载根实例中
        this.proxy(this.$data);
        this.proxy(this.$methods);
        // 监听数据
        new Observer(this.$data)
        if(this.$el) {
           new Compile(this.$el,this);
        }
    }
    proxy(data={}){
        Object.keys(data).forEach(key=>{
            // 这里的this 指向vue实例
            Object.defineProperty(this,key,{
                enumerable: true,
                configurable: true,
                set(value){
                    if(data[key] === value) return
                    return value
                },
                get(){
                    return data[key]
                },
            })
        })
    }
}