VUE的数据双向绑定

时间 2019-12-10

标签 vue 数据双向绑定繁體版

原文原文链接

写在前面的东西

Vue.js自从在github上开源以来就受到各方的极大关注，并在短暂的时间里当即火了起来，如今已成为最流行的前端框架之一；我也使用vue有一段时间了，对vue的双向绑定有必定的理解，在这和你们分享个人愚见，有错误的地方望你们给予指正。html

一、概述

让咱们先来看一下官网的这张数据绑定的说明图：

原理图告诉咱们，a对象下面的b属性定义了getter、setter对属性进行劫持，当属性值改变是就会notify通知watch对象，而watch对象则会notify到view上对应的位置进行更新（这个地方还没讲清下面再讲），而后咱们就看到了视图的更新了，反过来当在视图(如input)输入数据时，也会触发订阅者watch，更新最新的数据到data里面(图中的a.b),这样model数据就能实时响应view上的数据变化了，这样一个过程就是数据的双向绑定了。

看到这里就会第一个疑问：那么setter、getter是怎样实现的劫持的呢？答案就是vue运用了es5中Object.defineProperty()这个方法，因此要想理解双向绑定就得先知道Object.defineProperty是怎么一回事了；前端

2.Object.defineProperty

它是es5一个方法，能够直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象，对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一；不能同时是二者。
属性描述符包括：configurable(可配置性至关于属性的总开关，只有为true时才能设置，并且不可逆)、Writable(是否可写，为false时将不可以修改属性的值)、Enumerable(是否可枚举，为false时for..in以及Object.keys()将不能枚举出该属性)、get(一个给属性提供 getter 的方法)、set(一个给属性提供 setter 的方法)vue

var o = {name:'vue'};
Object.defineProperty(o, "age",{ value : 3,
                               writable : true,//能够修改属性a的值
                               enumerable : true,//可以在for..in或者Object.keys()中枚举
                               configurable : true//能够配置
                               });

Object.keys(o)//['name','age']
o.age = 4;
console.log(o.age) //4

var bValue;
Object.defineProperty(o, "b", {
                               get : function(){ 
                                         return bValue; 
                                     },
                               set : function(newValue){ 
                                       console.log('haha..')
                                       bValue = newValue; 
                                     },
                               enumerable : true,//默认值是false 及不能被枚举
                               configurable : true//默认也是false
                               });
 o.b = 'something';
//haha..

上面分别给出了对象属性描述符的数据描述符和存取描述的例子，注意一点是这两种不能同时拥有，也就是valuewritable不能和getset同时具有。在这里只是很粗浅的说了一下Object.defineProperty这个方法，要了解更多能够点击这里node

3.实现observer

咱们在上面一部分讲到了es5的Object.defineProperty()这个方法，vue正式经过它来实现对一个对象属性的劫持的，在建立实例的时候vue会对option中的data对象进行一次数据格式化或者说初始化，给每一个data的属性都设置上get/set进行对象劫持，代码以下：git

function Observer(data){
    this.data = data;
    if(Array.isArray(data)){
        protoAugment(data,arrayMethods); //arrayMethods实现对Array.prototype原型方法的拷贝;
        this.observeArray(data);
    }else{
        this.walk(data);
    }
    
}

Observer.prototype = {
    walk:function walk(data){
        var _this = this;
        Object.keys(data).forEach(function(key){
            _this.convert(key,data[key]);
        })
    },
    convert:function convert(key,val){
        this.defineReactive(this.data,key,val);
    },
    defineReactive:function defineReactive(data,key,val){
        var ochildOb = observer(val);
        var _this = this;
        Object.defineProperty(data,key,{
            configurable:false,
            enumerable:true,
            get:function(){
                console.log(`i get the ${key}-->${val}`)
                return val;
            },
            set:function(newVal){
                if(newVal == val)return;
                console.log(`haha.. ${key} changed oldVal-->${val} newVal-->${newVal}`);
                val = newVal;
                observer(newVal);//在这里对新设置的属性再一次进行get/set     
            }            
        })
    },
    observeArray:function observeArray(items){
        for (var i = 0, l = items.length; i < l; i++) {
            observer(items[i]);
         }
    }
}
function observer(data){
    if(!data || typeof data !=='object')return;
    return new Observer(data);
}
//让咱们来试一下
var obj = {name:'jasonCloud'};
var ob = observer(obj);
obj.name = 'wu';
//haha.. name changed oldVal-->jasonCloud newVal-->wu
obj.name;
//i get the name-->wu

到这一步咱们只实现了对属性的set/get监听，但并没实现变化后notify，那该怎样去实现呢？在VUE里面使用了订阅器Dep，让其维持一个订阅数组，但有订阅者时就通知相应的订阅者notify。github

let _id = 0;
/*
  Dep构造器用于维持$watcher检测队列；
*/
function Dep(){
    this.id = _id++;
    this.subs = [];
}

Dep.prototype = {
    constructor:Dep,
    addSub:function(sub){
        this.subs.push(sub);
    },
    notify:function(){
        this.subs.forEach(function(sub){
            if(typeof sub.update == 'function')
            sub.update();
        })
    },
    removeSub:function(sub){
        var index = this.subs.indexOf(sub);
        if(index >-1)
        this.subs.splice(index,1);
    },
    depend:function(){
        Dep.target.addDep(this);
    }
}

Dep.target = null; //定义Dep的一个属性，当watcher时Dep.targert=watcher实例对象

在这里构造器Dep,维持内部一个数组subs，当有订阅时就addSub进去，通知订阅者更新时就会调用notify方法通知到订阅者；咱们如今合并一下这两段代码segmentfault

function Observer(data){
    //省略的代码..
    this.dep = new Dep();
    //省略的代码..
    
}

Observer.prototype = {

    //省略的代码..
    
    defineReactive:function defineReactive(data,key,val){

        //省略的代码..

        var dep = new Dep();

        Object.defineProperty(data,key,{
            configurable:false,
            enumerable:true,
            get:function(){
                if(Dep.target){
                    dep.depend();
                    //省略的代码..
                }
                return val;
            },
            set:function(newVal){
                //省略的代码..
                dep.notify();         
            }            
        })
    },
    observeArray:function observeArray(items){
        for (var i = 0, l = items.length; i < l; i++) {
            observer(items[i]);
         }
    }
}

function observer(data){
    if(!data || typeof data !=='object')return;
    return new Observer(data);
}

上面代码中有一个protoAugment方法，在vue中是实现对数组一些方法的重写，但他并非直接在Array.prototype.[xxx]直接进行重写这样会影响到全部的数组中的方法，显然是不明智的，vue很巧妙的进行了处理，使其并不会影响到全部的Array上的方法，代码能够点击这里数组

到这里咱们实现了数据的劫持，并定义了一个订阅器来存放订阅者，那么谁是订阅者呢？那就是Watcher,下面让咱们看看怎样实现watcher前端框架

4.实现一个Watcher

watcher是实现view视图指令及数据和model层数据联系的管道，当在执行编译时候，他会把对应的属性建立一个Watcher对象让他和数据层model创建起联系。但数据发生变化是会触发update方法更新到视图上view中，反过来亦然。app

function Watcher(vm,expOrFn,cb){
    this.vm = vm;
    this.cb = cb;
    this.expOrFn = expOrFn;
    this.depIds = {};
    var value = this.get(),valuetemp;
    if(typeof value === 'object' && value !== null){
        if(Array.isArray(value)){
            valuetemp = [];
            for(var i = 0,len = value.length;i<len;i++){
                valuetemp.push(value[i]);
            }
        }else{
            valuetemp = {};
            for(var j in value){
                valuetemp[j] = value[j];
            }
        }
        this.value = valuetemp;
    }else{
        this.value = value;
    }
     
};
Watcher.prototype = {
    update:function(){
        this.run();
    },
    run:function(){
        var val = this.get(),valuetemp;
        var oldVal = this.value;
        if(val!==oldVal){
            if(typeof val === 'object' && val !== null){
                if(Array.isArray(val)){
                    valuetemp = [];
                    for(var i = 0,len = val.length;i<len;i++){
                        valuetemp.push(val[i]);
                    }
                }else{
                    valuetemp = {};
                    for(var j in val){
                        valuetemp[j] = val[j];
                    }
                }
                this.value = valuetemp;
            }else{
                this.value = val;
            }
            this.cb.call(this,val,oldVal);
        }
    },
    get:function(){
        Dep.target = this;
        var val = this.getVMVal();
        Dep.target = null;
        return val;
    },
    getVMVal:function(){
        var exps = this.expOrFn.split('.');
        var val = this.vm._data;
        exps.forEach(function(key){
            val = val[key];
        })

        return val;
    },
    addDep:function(dep){
        if(!this.depIds.hasOwnProperty(dep.id)){
            dep.addSub(this);
            this.depIds[dep.id] = dep;
        }
    }

}

到如今还差一步就是将咱们在容器中写的指令和{{}}让他和咱们的model创建起连续并转化成，咱们平时熟悉的html文档，这个过程也就是编译；编译简单的实现就是将咱们定义的容器里面全部的子节点都获取到，而后经过对应的规则进行转换编译，为了提升性能，先建立一个文档碎片createDocumentFragment（），而后操做都在碎片中进行，等操做成功后一次性appendChild进去；

function Compile(el,vm){
    this.$vm = vm;
    this.$el = this.isElementNode(el) ? el : document.querySelector(el);
    if(this.$el){
        this.$fragment = this.nodeToFragment(this.$el);
        this.init();
        this.$el.appendChild(this.$fragment);
        this.$vm.$option['mount'] && this.$vm.$option['mount'].call(this.$vm);
    }
}

5.实现一个简易版的vue

到目前为止咱们能够实现一个简单的数据双向绑定了，接下来要作的就是对这一套流程进行整合了，很少说上码

function Wue(option){
    this.$option = option;
    var data = this._data = this.$option.data;
    var _this = this;

    //数据代理实现数据从vm.xx == vm.$data.xx;
    Object.keys(data).forEach(function(val){
        _this._proxy(val)
    });

    observer(data)
    this.$compile = new Compile(this.$option.el , this);
}

Wue.prototype = {
    $watch:function(expOrFn,cb){
        return new Watcher(this,expOrFn,cb);
    },
    _proxy:function(key){
        var _this = this;
        Object.defineProperty(_this,key,{
            configurable: false,
            enumerable: true,
            get:function(){
                return _this._data[key];
            },
            set:function(newVal){
                _this._data[key] = newVal;
            }
        })
    }
}

在这里定义了一个Wue构造函数，当实例化的时候他会对option的data属性进行格式化（劫持），而后再进行编译，让数据和视图创建起联系；在这里用_proxy进行数据代理是为了当访问数据时能够直接vm.xx而不须要vm._data.xx;

源码放在这里

后话

在这里只是很初步的实现了一些vue的功能，并且还很残缺，好比对象的深层绑定，以及计算属性都尚未加入，做为后续部分吧，最后得膜拜一下尤神，太牛叉了！

参考资料：
1.https://segmentfault.com/a/11...
2.https://segmentfault.com/a/11...
3.https://github.com/youngwind/...