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

2021-09-12 20:57:40 字數 1116 閱讀 3093

object.defineproperty?

var model={};       

object.defineproperty(model,'txt',);

console.log(model.txt);//hello word!

defineproperty是es5的特性,該方法允許精確新增或修改物件的屬性。通過賦值操作新增的普通屬性是可列舉的,能夠在屬性列舉期間呈現出來(for…in 或 object.keys 方法), 這些屬性的值可以被改變,也可以被刪除。這個方法允許修改預設的額外選項(或配置)。預設情況下,使用 object.defineproperty() 新增的屬性值是不可修改的。

使用方法:

第乙個引數:要設定的目標物件(必填)

第二個引數:要定義或修改的屬性的名稱。(必填)

第三個引數:目標物件的屬性所擁有的方法或屬性值。(descriptor)(必填)

三個引數都是必填項,重點介紹第三個引數 descriptor

value:目標屬性的值

writable:false表示唯讀,且預設是false

configurable:當且僅當該屬性的 configurable 為 true 時,該屬性描述符才能夠被改變,同時該屬性也能從對應的物件上被刪除。預設為 false。以及除value和writable特性外的其他特性是否可以被修改。

enumerable:是否可列舉(是否能在for…in迴圈中遍歷出來或在object.keys中列舉出來),預設是false

get: 乙個給屬性提供 getter 的方法,如果沒有 getter 則為 undefined。當訪問該屬性時,該方法會被執行,方法執行時沒有引數傳入,但是會傳入this物件(由於繼承關係,這裡的this並不一定是定義該屬性的物件)。

預設為 undefined。

set:乙個給屬性提供 setter加粗樣式的方法,如果沒有 setter 則為 undefined。當屬性值修改時,觸發執行該方法。該方法將接受唯一引數,即該屬性新的引數值。

預設為 undefined。

在 get 和 set 方法中,this 指向某個被訪問和修改屬性的物件。

vue實現資料雙向繫結原理

vue實現資料雙向繫結主要是採用資料劫持結合發布者 訂閱者的模式的方式來實現。通過object.defineproperty 的get和set來劫持每個屬性,在資料發生變化時通過發布者發訊息給訂閱者,觸發相應的監聽回掉。具體就是先把說有的資料做乙個資料劫持。第一先修改資料,在input框輸入值的時候...

Vue實現雙向資料繫結的原理

vue實現雙向資料繫結的原理就是利用了 object.defineproperty 這個方法通過重新定義物件,獲取屬性值 get 和設定屬性值 set 的操作來實現。object.defineproperty 方法會直接在乙個物件上定義乙個新屬性,或者修改乙個物件的現有屬性,並返回這個物件。obje...

vue雙向繫結實現原理

當我們學會使用乙個東西的時候,就開始想要去知道這個東西是怎麼實現的,這個也是我們一直繼續 下去的動力,博主學了vue的時間也比較長了,自己也寫了乙個demo,還在不定時更新,有興趣的小夥伴可以去看看,如果這個專案能讓您有所收穫,那也是博主希望看到的,接下來也是聊聊自己開始學習vue一些實現原理的過程...