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

2021-08-28 12:22:44 字數 839 閱讀 4932

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",")

get : function () { 

return keyvalue

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

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

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

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

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

vue 資料雙向繫結實現

之前每件事都差不多,直到現在才發現差很多。現在才發現理清一件事的原委是多麼快樂的一件事,我們共同勉勵。紙上得來終覺淺,絕知此事要躬行 懶得扯淡,直接正題 ps 文章略長。model view編譯器 其基於 訂閱者 發布者模式,簡單的講就是訂閱者訂閱資料,一旦訂閱的資料變更過後,更新繫結的view檢視...

vue實現雙向資料繫結

object.defineproperty 方法會直接在乙個物件上定義乙個新屬性,或者修改乙個物件的現有屬性,並返回這個物件。object.defineproperty 方法有三個引數 引數 功能 作用 obj 要修改或定義key值的物件 key 對應obj物件的裡面某有已有或要修改的屬性 opti...

Vue如何實現資料雙向繫結

說明 index.html lang en head p p v text msg p v text car.color p v html msg p v html car.color p type text v model msg v on click clickfn 點我button div...