VUE的數(shù)據(jù)雙向綁定

魏明發(fā)布于2019-08-20 14:48 / 1037人閱讀

摘要：寫(xiě)在前面的東西自從在上開(kāi)源以來(lái)就受到各方的極大關(guān)注，并在短暫的時(shí)間里立即火了起來(lái)，現(xiàn)在已成為最流行的前端框架之一我也使用有一段時(shí)間了，對(duì)的雙向綁定有一定的理解，在這和大家分享我的愚見(jiàn)，有錯(cuò)誤的地方望大家給予指正。

寫(xiě)在前面的東西

Vue.js自從在github上開(kāi)源以來(lái)就受到各方的極大關(guān)注，并在短暫的時(shí)間里立即火了起來(lái)，現(xiàn)在已成為最流行的前端框架之一；我也使用vue有一段時(shí)間了，對(duì)vue的雙向綁定有一定的理解，在這和大家分享我的愚見(jiàn)，有錯(cuò)誤的地方望大家給予指正。

1、概述

 讓我們先來(lái)看一下官網(wǎng)的這張數(shù)據(jù)綁定的說(shuō)明圖：

原理圖告訴我們，a對(duì)象下面的b屬性定義了getter、setter對(duì)屬性進(jìn)行劫持，當(dāng)屬性值改變是就會(huì)notify通知watch對(duì)象，而watch對(duì)象則會(huì)notify到view上對(duì)應(yīng)的位置進(jìn)行更新（這個(gè)地方還沒(méi)講清下面再講），然后我們就看到了視圖的更新了，反過(guò)來(lái)當(dāng)在視圖(如input)輸入數(shù)據(jù)時(shí)，也會(huì)觸發(fā)訂閱者watch，更新最新的數(shù)據(jù)到data里面(圖中的a.b),這樣model數(shù)據(jù)就能實(shí)時(shí)響應(yīng)view上的數(shù)據(jù)變化了，這樣一個(gè)過(guò)程就是數(shù)據(jù)的雙向綁定了。

看到這里就會(huì)第一個(gè)疑問(wèn)：那么setter、getter是怎樣實(shí)現(xiàn)的劫持的呢？答案就是vue運(yùn)用了es5中Object.defineProperty()這個(gè)方法，所以要想理解雙向綁定就得先知道Object.defineProperty是怎么一回事了；

2.Object.defineProperty

它是es5一個(gè)方法，可以直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性，并返回這個(gè)對(duì)象，對(duì)象里目前存在的屬性描述符有兩種主要形式：數(shù)據(jù)描述符和存取描述符。數(shù)據(jù)描述符是一個(gè)擁有可寫(xiě)或不可寫(xiě)值的屬性。存取描述符是由一對(duì) getter-setter 函數(shù)功能來(lái)描述的屬性。描述符必須是兩種形式之一；不能同時(shí)是兩者。
屬性描述符包括：configurable(可配置性相當(dāng)于屬性的總開(kāi)關(guān)，只有為true時(shí)才能設(shè)置，而且不可逆)、Writable(是否可寫(xiě)，為false時(shí)將不能夠修改屬性的值)、Enumerable(是否可枚舉，為false時(shí)for..in以及Object.keys()將不能枚舉出該屬性)、get(一個(gè)給屬性提供 getter 的方法)、set(一個(gè)給屬性提供 setter 的方法)

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,//默認(rèn)值是false 及不能被枚舉
                               configurable : true//默認(rèn)也是false
                               });
 o.b = "something";
//haha..

上面分別給出了對(duì)象屬性描述符的數(shù)據(jù)描述符和存取描述的例子，注意一點(diǎn)是這兩種不能同時(shí)擁有，也就是valuewritable不能和getset同時(shí)具備。在這里只是很粗淺的說(shuō)了一下Object.defineProperty這個(gè)方法，要了解更多可以點(diǎn)擊這里

3.實(shí)現(xiàn)observer

我們?cè)谏厦嬉徊糠种v到了es5的Object.defineProperty()這個(gè)方法，vue正式通過(guò)它來(lái)實(shí)現(xiàn)對(duì)一個(gè)對(duì)象屬性的劫持的，在創(chuàng)建實(shí)例的時(shí)候vue會(huì)對(duì)option中的data對(duì)象進(jìn)行一次數(shù)據(jù)格式化或者說(shuō)初始化，給每個(gè)data的屬性都設(shè)置上get/set進(jìn)行對(duì)象劫持，代碼如下：

function Observer(data){
    this.data = data;
    if(Array.isArray(data)){
        protoAugment(data,arrayMethods); //arrayMethods實(shí)現(xiàn)對(duì)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);//在這里對(duì)新設(shè)置的屬性再一次進(jìn)行g(shù)et/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);
}
//讓我們來(lái)試一下
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

到這一步我們只實(shí)現(xiàn)了對(duì)屬性的set/get監(jiān)聽(tīng)，但并沒(méi)實(shí)現(xiàn)變化后notify，那該怎樣去實(shí)現(xiàn)呢？在VUE里面使用了訂閱器Dep，讓其維持一個(gè)訂閱數(shù)組，但有訂閱者時(shí)就通知相應(yīng)的訂閱者notify。

let _id = 0;
/*
  Dep構(gòu)造器用于維持$watcher檢測(cè)隊(duì)列；
*/
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的一個(gè)屬性，當(dāng)watcher時(shí)Dep.targert=watcher實(shí)例對(duì)象

在這里構(gòu)造器Dep,維持內(nèi)部一個(gè)數(shù)組subs，當(dāng)有訂閱時(shí)就addSub進(jìn)去，通知訂閱者更新時(shí)就會(huì)調(diào)用notify方法通知到訂閱者；我們現(xiàn)在合并一下這兩段代碼

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);
}

上面代碼中有一個(gè)protoAugment方法，在vue中是實(shí)現(xiàn)對(duì)數(shù)組一些方法的重寫(xiě)，但他并不是直接在Array.prototype.[xxx]直接進(jìn)行重寫(xiě)這樣會(huì)影響到所有的數(shù)組中的方法，顯然是不明智的，vue很巧妙的進(jìn)行了處理，使其并不會(huì)影響到所有的Array上的方法，代碼可以點(diǎn)擊這里

到這里我們實(shí)現(xiàn)了數(shù)據(jù)的劫持，并定義了一個(gè)訂閱器來(lái)存放訂閱者，那么誰(shuí)是訂閱者呢？那就是Watcher,下面讓我們看看怎樣實(shí)現(xiàn)watcher

4.實(shí)現(xiàn)一個(gè)Watcher

watcher是實(shí)現(xiàn)view視圖指令及數(shù)據(jù)和model層數(shù)據(jù)聯(lián)系的管道，當(dāng)在執(zhí)行編譯時(shí)候，他會(huì)把對(duì)應(yīng)的屬性創(chuàng)建一個(gè)Watcher對(duì)象讓他和數(shù)據(jù)層model建立起聯(lián)系。但數(shù)據(jù)發(fā)生變化是會(huì)觸發(fā)update方法更新到視圖上view中，反過(guò)來(lái)亦然。

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
到現(xiàn)在還差一步就是將我們?cè)谌萜髦袑?xiě)的指令和{{}}讓他和我們的model建立起連續(xù)并轉(zhuǎn)化成，我們平時(shí)熟悉的html文檔，這個(gè)過(guò)程也就是編譯；編譯簡(jiǎn)單的實(shí)現(xiàn)就是將我們定義的容器里面所有的子節(jié)點(diǎn)都獲取到，然后通過(guò)對(duì)應(yīng)的規(guī)則進(jìn)行轉(zhuǎn)換編譯，為了提高性能，先創(chuàng)建一個(gè)文檔碎片createDocumentFragment（），然后操作都在碎片中進(jìn)行，等操作成功后一次性appendChild進(jìn)去；
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.實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的vue
到目前為止我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)據(jù)雙向綁定了，接下來(lái)要做的就是對(duì)這一套流程進(jìn)行整合了，不多說(shuō)上碼
function Wue(option){
    this.$option = option;
    var data = this._data = this.$option.data;
    var _this = this;

    //數(shù)據(jù)代理實(shí)現(xiàn)數(shù)據(jù)從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;
            }
        })
    }
}
在這里定義了一個(gè)Wue構(gòu)造函數(shù)，當(dāng)實(shí)例化的時(shí)候他會(huì)對(duì)option的data屬性進(jìn)行格式化（劫持），然后再進(jìn)行編譯，讓數(shù)據(jù)和視圖建立起聯(lián)系；在這里用_proxy進(jìn)行數(shù)據(jù)代理是為了當(dāng)訪問(wèn)數(shù)據(jù)時(shí)可以直接vm.xx而不需要vm._data.xx;
源碼放在這里
后話
在這里只是很初步的實(shí)現(xiàn)了一些vue的功能，而且還很殘缺，比如對(duì)象的深層綁定，以及計(jì)算屬性都還沒(méi)有加入，作為后續(xù)部分吧，最后得膜拜一下尤神，太牛叉了！
參考資料：
 1.https://segmentfault.com/a/11...
 2.https://segmentfault.com/a/11...
 3.https://github.com/youngwind/...