vue的双向绑定

撸一个vue的双向绑定

 

1、前言

说起双向绑定可能大家都会说：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的，本文就以从简入繁的形式给大家撸一遍，让大家了解双向绑定的技术细节。

2、来一个简单的版本

让我们的数据变得可观测，实现原理不难，利用Object.defineProperty重新定义对象的属性描述符。

 /**
    * 把一个对象的每一项都转化成可观测对象
    * @param { Object } obj 对象
    */
    function observable(obj) {
        if (!obj || typeof obj !== 'object') {
            return;
        }
        let keys = Object.keys(obj);
        keys.forEach((key) => {
            defineReactive(obj, key, obj[key])
        })
        return obj;
    }
    /**
    * 使一个对象转化成可观测对象
    * @param { Object } obj 对象
    * @param { String } key 对象的key
    * @param { Any } val 对象的某个key的值
    */
    function defineReactive(obj, key, val) {
        Object.defineProperty(obj, key, {
            get() {
                console.log(`${key}属性被读取了`);
                return val;
            },
            set(newVal) {
                console.log(`${key}属性被修改了`);
                val = newVal;
            }
        })
    }
    let car = observable({
        'brand': 'BMW',
        'price': 3000
    })
    //测试
    console.log(car.brand);

3、一步一步实现一个观察者模式的双向绑定

先给一张思维导向图吧（图盗的，链接：https://www.cnblogs.com/libin-1/p/6893712.html），本文章不涉及Compile部分。
这张图我就不解释，我们先跟着一步一步的把代码撸出来，再回头来看这张图，问题不大。

建议在读之前一定要了解观察者模式和发布订阅模式以及其区别，一篇简单的文章总结了一下两种模式的区别（链接：https://www.cnblogs.com/chenlei987/p/10504956.html），Vue的双向绑定使用的就是观察者模式，其中Dep对象就是观察者的目标对象，而Watcher就是观察者，然后等待Dep对象的通知更新的，其中update方法是由watcher自己管理的，并非如发布订阅模式由目标对象去管理，在观察者模式中，目标对象管理的订阅者列表应该是Watcher本身，而不是事件/订阅主题。

3.1、声明一个Vue类，并将data里面的数据代理到Vue实例上面。

var Vue = (function (){
    class Vue{
            constructor (options = {}){

                //简化处理
                this.$options = options;

                let data = (this._data = 
                    typeof this.$options.data == 'function' ? 
                        this.$options.data() 
                        : 
                        this.$options.data);
                Object.keys(data).forEach(key =>{ this._proxy(key) });

                // 监听数据
                //observe(data);
            }
            _proxy (key){
                //用this这个对象去代理 this._data这个对象里面的key
                Object.defineProperty(this, key, {
                    configurable: true,
                    enumerable: true,
                    set: (val) => {
                        this._data[key] = val
                    },
                    get: () =>{
                        return this._data[key]
                    }
                })
            }
            
        }
        return Vue;
}
let VM = new Vue({
    data (){
        return {
            a: 1,
            arr: [1,2,3,4,5,6]
        }
    },
});
//说明 _proxy代理成功了
console.log(VM.a);
VM.a = 2;
console.log(VM.a);

3.2、让data里面的数据变得可观测，开启observe之旅

注：下面我所说的"data里面"就是指vue实例的data属性。
上面代码Vue类的constructor里面我注释了一行代码,下面我取消注释，并且开始定义observe函数

// 监听数据
 observe(data);

在定义observe方法之前，首先明白我们observe要做什么？
实参是data数据，我们要遍历整个data数据的key，为data数据的每一个key都用Object.defineProperty去重新定义它的 getter和setter函数，从而使其可观测。

class Observer{
            constructor (value){
                this.value = value;
                this.walk(value);
            }
            // 遍历属性值并监听
            walk(value) {
                Object.keys(value).forEach(key => this.convert(key, value[key]));
            }
            // 执行监听的具体方法
            convert(key, val) {
                defineReactive(this.value, key, val);
            }
        }
        function defineReactive(obj, key, val) {
            const dep = new Dep();
            // 给当前属性的值添加监听
            let chlidOb = observe(val);
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: () => {
                  
                  //do something
                  //  if (Dep.target) {
                    //    dep.depend();
                    //}
                    return val;
                },
                set: newVal => {
                    if (val === newVal) return;
                    val = newVal;
                    
                    //do something
                    // 对新值进行监听
                    //chlidOb = observe(newVal);
                    // 通知所有订阅者，数值被改变了
                    //dep.notify();
                },
            });
        }

        function observe(value) {
             // 当值不存在，或者不是复杂数据类型时，不再需要继续深入监听
            if (!value || typeof value !== 'object') {
                return;
            }
            return new Observer(value);
        }

看到在get和set函数里面的do something了吗，可以理解为在data里面的每个key的设置和获取都被我们截取到了，在每个key的设置和获取时我们可以干些事情了。比如更数据对应的DOM。
要做什么呢？
get函数： 从思维图图1可以看出需要把当前的Watcher添加进Dep对象，等待数据更新，调用回调。
set函数： 数据更新，Dep对象通知所有订阅的watcher更新，调用回调，更新视图。

3.3、Watcher

先声明一个Watcher类，用于添加进Dep对象并通知更新视图使用。

 let uid = 0;
        class Watcher {
            constructor(vm, expOrFn, cb) {
                // 设置id,用于区分新Watcher和只改变属性值后新产生的Watcher
                this.id = uid++;

                this.vm = vm; // 被订阅的数据一定来自于当前Vue实例
                this.cb = cb; // 当数据更新时想要做的事情
                this.expOrFn = expOrFn; // 被订阅的数据
                this.val = this.get(); // 维护更新之前的数据
            }
            // 对外暴露的接口，用于在订阅的数据被更新时，由订阅者管理员(Dep)调用
            update() {
                this.run();
            }
            addDep(dep) {
                // 如果在depIds的hash中没有当前的id,可以判断是新Watcher,因此可以添加到dep的数组中储存
                // 此判断是避免同id的Watcher被多次储存
                //这里要是不限制重复，你会发现在响应的过程中，Dep实例下的subs会成倍的增加watcher。多输入几个字浏览器就卡死了。
                if (!dep.depIds.hasOwnProperty(this.id)) {
                    dep.addSubs(this);
                    dep.depIds[this.id] = dep;
                }
            }
            run() {
                const val = this.get();
                if (val !== this.val) {
                    this.val = val;
                    this.cb.call(this.vm, val);
                }
            }
            get() {
                // 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时，通知订阅者管理员收集当前订阅者
                Dep.target = this;
                //注意：在这里获取该属性 从而就触发了defineProperty的get方法，该watcher已经进入Dep的subs队列了
                const val = this.vm._data[this.expOrFn]; 
                
                //初始化执行一遍回调
                this.cb.call(this.vm, val);

                //  置空，用于下一个Watcher使用
                Dep.target = null;
                return val;
            }
        }

上面代码我们先从constructor看起，接受三个参数，vm当前的vue实例，expOrFn实例化时该watcher实例所 代表/处理 的"data里面"(‘data里面’上面有解释，这里提醒一下)的哪个值，cb，回调函数，也就是当数据更新后需要做什么（自然是更新DOM咯）。
然后在constructor里面还调用了 this.get()。详细看一下get函数的定义，两行代码需要注意：

// 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时，通知订阅者管理员收集当前订阅者
Dep.target = this;
//注意：在这里获取该属性 从而就触发了defineProperty的get方法，该watcher已经进入Dep的subs队列了
const val = this.vm._data[this.expOrFn]; 

Dep.target = this;确定了当前的活动的watcher实例，Dep.target我们可以认为它是一个全局变量，用于存放当前活动的watcher实例。
const val = this.vm._data[this.expOrFn];获取数据，这句话其实就已经触发了其自身的getter方法（这点要注意，不然你连流程都理解不通）。
进入了getter方法，也就把当前活动的实例的watcher添加进dep对象等待更新。
添加进Dep对象后，置空，用于下一个Watcher使用 Dep.target = null;

3.4、Dep

一直在说dep对象，我们一定要知道dep对象就是观察者模式里面的目标对象，用于存放watcher和负责通知更新的。
下面来定义一个Dep对象，放到class Watcher前面。 注意Dep的作用范围.

class Dep{
            constructor (){
                this.depIds = {}; // hash储存订阅者的id,避免重复的订阅者
                //订阅者列表  watcher实例列表
                this.subs = [];
            }
            depend (){
                Dep.target.addDep(this);//相当于调用this.addSubs 将 watcher实例添加进订阅列表 等待通知更新
                //本来按照我们的理解，在denpend里面是需要将watcher添加进 Dep对象， 等待通知更新的，所以应该调用 this.addSubs(Dep.target)
                //但是由于需要解耦 所以 先调用 watcher的addDep 在addDep中调用Dep实例的addSubs
                //简化理解就是 将 watcher实例添加进订阅列表 等待通知更新
            }
            addSubs (sub) {
                //这里的sub肯定是watcher实例
                this.subs.push(sub);
            }
            notify (){
                //监听到值的变化，通知所有订阅者watcher更新
                this.subs.forEach((sub) =>{
                    sub.update();
                });
            }
        }
         Dep.target = null;//存储当前活动的watcher

再改改defineReactive，把注释打开

function defineReactive(obj, key, val) {
            const dep = new Dep();
            // 给当前属性的值添加监听
            let chlidOb = observe(val);
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: () => {
                    // 如果Dep类存在target属性，将其添加到dep实例的subs数组中
                    // target指向一个Watcher实例，每个Watcher都是一个订阅者
                    // Watcher实例在实例化过程中，会读取data中的某个属性，从而触发当前get方法
                    if (Dep.target) {
                        dep.depend();
                    }
                    return val;
                },
                set: newVal => {
                    if (val === newVal) return;
                    val = newVal;
                    // 对新值进行监听
                    chlidOb = observe(newVal);
                    // 通知所有订阅者，数值被改变了
                    dep.notify();
                },
            });
        }

然后起一个watcher来监听

3.5、让数据响应起来

先给Vue暴露一个方法 $watcher 可以调用实例化Watcher。

class Vue{
            constructor (options = {}){

                //简化处理
                this.$options = options;

                let data = (this._data = 
                    typeof this.$options.data == 'function' ? 
                        this.$options.data() 
                        : 
                        this.$options.data);
                Object.keys(data).forEach(key =>{ this._proxy(key) });

                // 监听数据
                observe(data);
            }
            // 对外暴露调用订阅者的接口，内部主要在指令中使用订阅者
            $watch(expOrFn, cb) {
                //property需要监听的属性  cb在监听到更新后的回调
                new Watcher(this, expOrFn, cb);
            }
            _proxy (key){
                //用this这个对象去代理 this._data这个对象里面的key
                Object.defineProperty(this, key, {
                    configurable: true,
                    enumerable: true,
                    set: (val) => {
                        this._data[key] = val
                    },
                    get: () =>{
                        return this._data[key]
                    }
                })
            }
        }

3.6、测试： 声明一个实例

html部分

 <h3>Vue双向绑定</h3>
    <input type="text" id="input">
    <p id="react"></p>
    <h3>Vue数组双向绑定</h3>
    <input type="text" id="arr-input">
    <p id="arr-reat"></p>

let reactElement = document.querySelector("#react");
    let input = document.getElementById('input');
    input.addEventListener('keyup', function (e) {
        VM.a = e.target.value;
    });

    VM.$watch('a', val => reactElement.innerHTML = val); //监听属性 a 当a发生改变时


    //数组的响应并不能实现
    let arrReactElement = document.querySelector("#arr-reat");
    let arrInput = document.getElementById('arr-input');
    arrInput.addEventListener('keyup', function (e) {
        VM.arr.push(e.target.value);
        console.log(VM.arr);
    });
    VM.$watch('arr', val => arrReactElement.innerHTML = val); //监听属性 a 当a并没有发生改变时

VM.$watch就可以实例化一个watcher，从而去劫持data里面某个属性的改变，在改变时调用回调函数。
数组的改变并没有实现。上面的代码见https://gitee.com/cchennlleii/MyTest/blob/master/vueReactive/vue-reactive%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0.html

4、对数组的支持

在说这个之前我们先去看一看vue官网对于数组更新检测的说明，链接：https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B


总的来说，对于数组支持更新的只是数组原型上的方法，对于vm.items[index] = newValue是不支持的。
其实Object.defineProperty对于数组都是不支持的，根据消息vue3.0用的proxy对于数组得到了完美的支持，但是兼容性不怎么样。
既然vue实现了对数组原型方法的支持，那么我们也来让我们的例子对数组方法也支持吧。
原理不难，vue对于所有的数组原型方法都写了一层hack，让其支持更新。那么下面我们就一步一步来实现。

4.1、准备一套数组原型方法的hack

/**
        * Define a expOrFn.
        */
        function def(obj, key, val, enumerable) {
            Object.defineProperty(obj, key, {
                value: val,
                enumerable: !!enumerable,
                writable: true,
                configurable: true
            });
        }

        //数组改变的监听
        var arrayProto = Array.prototype;
        var arrayMethods = Object.create(arrayProto);
        var methodsToPatch = [
            'push',
            'pop',
            'shift',
            'unshift',
            'splice',
            'sort',
            'reverse'
        ];
        /**
        * Intercept mutating methods and emit events
        */
        methodsToPatch.forEach(function (method) {
            // cache original method
            var original = arrayProto[method];
            def(arrayMethods, method, function mutator() {
                var args = [], len = arguments.length;
                while (len--) args[len] = arguments[len];

                var result = original.apply(this, args);
                var ob = this.__ob__;
                var inserted;
                switch (method) {
                    case 'push':
                    case 'unshift':
                        inserted = args;
                        break
                    case 'splice':
                        inserted = args.slice(2);
                        break
                }
                if (inserted) { ob.observeArray(inserted); }
                // notify change
                ob.dep.notify(); //调用该数组下的 __ob__.dep 详细可见class Observer的constructor里的注释
                return result
            });
        });

上面代码准备了一个arrayMethods的对象，它继承自Array.prototype,并且对methodsToPatch里面的方法进行了改写，后面我们会把arrayMethods这个对象挂到"data里面"每个数组下，让该数组调用数组原生方法，比如[].push其实调用的是arrayMethods里面被改写的方法，从而在该数组改变时获取到该数组的更新。
下面开始挂载arrayMethods对象，在挂载我之前我们看到有一个this.__ob__属性，这里的this指向要观测的数组。这个__ob__就是前面的observe对象，并且每个observe下面还有一个dep对象。下面我们来理清楚这层关系。

class Observer{
    constructor (value){
        this.value = value;

        //下面两行代码虽然很简单，但是我们需要从这里理清楚关系
        //假如 有数据如 {a: [1,2,3], b: 1}，  然后调用oberve(vm.a)，vm当前vue实例
        //会自动挂载 __ob__ 和 __ob__.dep
        // 那么对数组a进行oberserve的对象就是a.__ob__， 它所对应的dep对象就是 a.__ob__.dep
        //详细使用可以在对数组的方法进行hack的时候 使用到
        def(value, '__ob__', this);//让被监听的数据都带上一个不可枚举的属性 __ob__ 代表observe对象
        this.dep = new Dep();//首先每个oberserve实例下有一个dep对象
        
        
        //在这里处理数组
        if (Array.isArray(value)){
            //调用数组的hack方法， 让数组也能被监听  arrayMethods
            var arrayKeys = Object.getOwnPropertyNames(arrayMethods);
            for (var i = 0, l = arrayKeys.length; i < l; i++) {
                var key = arrayKeys[i];
                def(value, key, arrayMethods[key]);
            }
        }   
        else{
            //对象 遍历key  添加监听
            this.walk(value);
        }
    }
    //Observer的其他方法
    //...
}

上面代码首先给每个值挂载__ob__属性（不可枚举）,然后给每个Obeserve对象挂载Dep对象。然后根据value的类型，如果是数组就会挂载arrayMethods方法。
现在我们来理清数组在哪里依赖收集，在哪里通知更新的。
在对数组hack的方法里面（上上一段代码）有一段ob.dep.notify(); 这里通知更新，所以依赖收集也一定要收集到value.__ob__.dep对象里面，两个dep对象应该是相同的，下面我们来看看依赖收集写在哪里的。

function defineReactive(obj, key, val) {
            const dep = new Dep();
            // 给当前属性的值添加监听
            let childOb = observe(val);
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: () => {
                    // 如果Dep类存在target属性，将其添加到dep实例的subs数组中
                    // target指向一个Watcher实例，每个Watcher都是一个订阅者
                    // Watcher实例在实例化过程中，会读取data中的某个属性，从而触发当前get方法
                    if (Dep.target) {
                        dep.depend();
                        if (childOb) {
                            childOb.dep.depend();
                            if (Array.isArray(val)) {
                                dependArray(val);
                            }
                        }
                    }
                    return val;
                },
                set: newVal => {
                    if (val === newVal) return;
                    val = newVal;
                    // 对新值进行监听
                    childOb = observe(newVal);
                    // 通知所有订阅者，数值被改变了
                    dep.notify();
                },
            });
        }
        function dependArray(value) {
            for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
                e = value[i];
                e && e.__ob__ && e.__ob__.dep.depend();
                if (Array.isArray(e)) {
                    dependArray(e);
                }
            }
        }

数组虽然在Object.defineProperty里面set方法无法响应，但是get方法是没有问题的，所以在数组get的时候，判断val如果是array，会调用value.__ob__.dep.depend进行依赖收集。与上面依赖通知使用了同意个dep对象，也就是挂载在自身的__ob__.dep。
写到这里我们就完全实现对数组原生方法的支持了。
下面看一下效果 代码地址：https://gitee.com/cchennlleii/MyTest/blob/master/vueReactive/vue-reactive%E5%AF%B9%E6%95%B0%E7%BB%84%E7%9A%84%E6%94%AF%E6%8C%81.html

4.2测试代码

html部分

<h3>Vue双向绑定</h3>
    <input type="text" id="input">
    <p id="react"></p>
    <h3>Vue数组双向绑定</h3>
    <input type="text" id="arr-input">
    <p id="arr-reat"></p>
    <h3>Vue对nextTick实现</h3>
    <button id="addBtn">加100000次</button>
    <p id="react-tick"></p>

let reactElement = document.querySelector("#react");
    let input = document.getElementById('input');
    input.addEventListener('keyup', function (e) {
        VM.a = e.target.value;
    });

    VM.$watch('a', val => reactElement.innerHTML = val); //监听属性 a 当a发生改变时


    //数组的响应并能实现
    let arrReactElement = document.querySelector("#arr-reat");
    let arrInput = document.getElementById('arr-input');
    arrInput.addEventListener('keyup', function (e) {
        VM.arr.push(e.target.value);
        console.log(VM.arr);
    });
    VM.$watch('arr', val => arrReactElement.innerHTML = val); //监听属性 a 当a发生改变时


    let reactTick = document.querySelector("#react-tick");
    VM.$watch('tickData', val => {
        console.log(val);
        reactTick.innerHTML = val;
    }); //监听属性 a 当a发生改变时
    document.querySelector('#addBtn').addEventListener('click', function () {
        for (let i = 0; i < 100000; i++) {
            VM.tickData = i;
        }
    }, false)

效果：

5、对nextTick的支持

vue官网对nextTick的解释：

nextTick如果自己实现就是在下一个envet loop执行，不在本次同步任务中执行。
自己实现一个简单的：

//nextTick的实现
let callbacks = [];
let pending = false;

function nextTick(cb) {
    callbacks.push(cb);
    if (!pending) {
        pending = true;
        setTimeout(flushCallbacks, 0);
    }
}
function flushCallbacks() {
    pending = false;
    const copies = callbacks.slice(0);
    callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
        copies[i]();
    }
}

简单理解： 在本次event loop中收集cb（任务），放到下一个event loop去执行。 关于不知道event loop的可以参考这篇文章：https://www.cnblogs.com/chenlei987/p/10479433.html，我总结的很简单。我参考的http://www.ruanyifeng.com/blog/2014/10/event-loop.html。
在理解event loop的同时也需要同时了解 microtask和macrotask的区别。
好了言归正传，在vue的'data里面'某个属性发生了改变，并被观测到后，调用了watcher.update，并不会立即调用watcher.run去更新视图，它会经过nextTick之后再更新视图，说起来有点牵强。
还是第四部=步的代码，没有实现对nextTick的优化。
代码：

<h3>Vue双向绑定</h3>
    <input type="text" id="input">
    <p id="react"></p>
    <h3>Vue数组双向绑定</h3>
    <input type="text" id="arr-input">
    <p id="arr-reat"></p>
    <h3>Vue对nextTick实现</h3>
    <button id="addBtn">加1000次</button>
    <p id="react-tick"></p>

let reactTick = document.querySelector("#react-tick");
    VM.$watch('tickData', val => {
        console.log(val);
        reactTick.innerHTML = val;
    }); //监听属性 a 当a发生改变时
    document.querySelector('#addBtn').addEventListener('click', function () {
        for (let i = 0; i < 1000; i++) {
            VM.tickData = i;
        }
    }, false)

效果是这样的：

现在的效果是VM.tickData加1000次，那么cb（回调）就会调用1000次，这样是非常影响性能的，我们想要的效果是无论VM.tickData在本次event loop加多少次，都不会触发回调，只需要在VM.tickData加完之后，触发一次最终的cb（回调）就ok了。
下面我们就来实现这种优化，代码不多。

//nextTick的实现
            let callbacks = [];
            let pending = false;

            function nextTick(cb) {
                callbacks.push(cb);
                if (!pending) {
                    pending = true;
                    setTimeout(flushCallbacks, 0);
                }
            }
            function flushCallbacks() {
                pending = false;
                const copies = callbacks.slice(0);
                callbacks.length = 0;
                for (let i = 0; i < copies.length; i++) {
                    copies[i]();
                }
            }
            
            let has = {};
            let queue = [];
            let waiting = false;
            function queueWatcher(watcher) {
                const id = watcher.id;
                if (has[id] == null) {
                    has[id] = true;
                    queue.push(watcher);

                    if (!waiting) {
                        waiting = true;
                        nextTick(flushSchedulerQueue);
                    }
                }
            }
            function flushSchedulerQueue() {
                let watcher, id;

                for (index = 0; index < queue.length; index++) {
                    watcher = queue[index];
                    id = watcher.id;
                    has[id] = null;
                    watcher.run();
                }

                waiting = false;
            }

然后更改Watcher里面的update方法，并不直接调用watcher.run，而是经过queueWatcher控制

update() {
    queueWatcher(this);
    // this.run();
}

代码地址：https://gitee.com/cchennlleii/MyTest/blob/master/vueReactive/vue-reactive%E5%AF%B9nextTck%E7%9A%84%E6%94%AF%E6%8C%81.html

6、总结

如果面试官问我关于双向绑定的问题，从这三个方面去回答，Object.definproperty，观察者模式，nextTick，当然，你需要把这三个点联系起来去描述，相信我你把上面的看懂了，联系起来完全没问题的，你是最棒的！

7、本文参考：

https://codepen.io/xiaomuzhu/pen/jxBRgj/
https://www.jianshu.com/p/2df6dcddb0d7