vue雙向繫結原理

2021-09-29 11:46:21 字數 1387 閱讀 2400

大家知道vue的雙向繫結原理是利用object.defineproperty()這一方法,以下是我研究該方法的一些內容~~

語法:object.defineproperty(obj, prop, descriptor)
descriptor是將被定義或修改的屬性描述符,而雙向繫結是利用get和set屬性描述符。

set:乙個給屬性提供 setter 的方法,如果沒有 setter 則為 

undefined。當屬性值修改時,觸發執行該方法。該方法將接受唯一

引數,即該屬性新的引數值。

get:乙個給屬性提供 getter 的方法,如果沒有 getter 則為 

undefined。當訪問該屬性時,該方法會被執行,方法執行時沒有參

數傳入,但是會傳入this物件(由於繼承關係,這裡的this並不一定

是定義該屬性的物件)。

;// 為物件obj新增val屬性

object.

defineproperty

(obj,

"val",,

//取值

get:

function()

})//給input新增事件監聽

document.

getelementbyid

("test").

addeventlistener

("input"

,function

(e))

script

>

body

>

html

>

控制台效果

Vue雙向繫結原理

vue實現資料雙向繫結的原理就是用object.defineproperty 重新定義 set方法 物件設定屬性值和 get方法 獲取屬性值的操縱來實現的 object.property 方法的解釋 object.property 引數1,引數2,引數3 返回值為該物件obj 其中引數1為該物件 o...

vue雙向繫結原理

vue資料雙向繫結是通過資料劫持結合發布者 訂閱者模式來實現的。首先要對資料進行劫持監聽,所以需要設定乙個 observer,用來監聽所有的屬性。如果屬性發生了變化,就要告訴訂閱者watcher看是否需要更新,因為訂閱者很多,所以我們需要有乙個訊息訂閱器容器dep專門收集訂閱者,然後在 observ...

vue雙向繫結原理

view更新data 通過事件監聽,比如input標籤監聽 input 事件 data更新view 通過object.defineproperty 對屬性設定乙個set函式,當資料改變了就會來觸發這個函式,將一些需要更新的方法放在這裡面就可以實現 實現過程 1.實現乙個 observer,用來劫持並...