1. 程式人生 > >面試總結:vue實現資料雙向繫結的原理

面試總結:vue實現資料雙向繫結的原理

vue實現資料雙向繫結的原理就是用Object.defineproperty()重新定義(set方法)物件設定屬性值和(get方法)獲取屬性值的操縱來實現的

Object.property()方法的解釋:Object.property(引數1,引數2,引數3)   返回值為該物件obj

其中引數1為該物件(obj),引數2為要定義或修改的物件的屬性名,引數3為屬性描述符,屬性描述符是一個物件,主要有兩種形式:資料描述符和存取描述符。這兩種物件只能選擇一種使用,不能混合使用。而get和set屬於存取描述符物件的屬性。

這個方法會直接在一個物件上定義一個新屬性或者修改物件上的現有屬性,並返回該物件

var keyvalue=1;

var obj={};

Object.defineproperty(obj,"key",{

    enumberable:true,

    configurable:true,

    set:function (newvalue) {

    keyvalue=newvalue

    console.log("keyvalue的值已經發生了改變,目前的值是:${keyvalue}")

},

    get : function () { 

    return keyvalue

}

})

 物件obj獲取key屬性時,會觸發 get方法,得到是變數keyvalue的值。當重新設定key值時,會觸發set方法,將變數keyvalue的值設定成已經變換的值。如此 就實現了一個簡單的資料雙向繫結,當改變變數keyvalue的值的時候,obj.key也會發生改變,設定obj.key時,變數keyvalue也會改變。

vue的資料雙向繫結是通過資料劫持和釋出-訂閱者功能來實現的

實現步驟:1.實現一個監聽者Oberver來劫持並監聽所有的屬性,一旦有屬性發生變化就通知訂閱者

2.實現一個訂閱者watcher來接受屬性變化的通知並執行相應的方法,從而更新檢視

3.實現一個解析器compile,可以掃描和解析每個節點的相關指令,並根據初始化模板資料以及初始化相對應的訂閱者