vue雙向繫結原理

2022-06-16 10:24:10 字數 734 閱讀 5392

要了解vue的雙向繫結原理,首先得了解object.defineproperty()方法,因為訪問器屬性是物件中的一種特殊屬性,它不能直接在物件中設定,而必須通過 object.defineproperty() 方法單獨定義。可以先去mdn上對object.defineproperty方法的定義;

了解之後,我們來寫乙個簡單的雙向繫結的栗子

我們通過addeventlistener監聽隨文字框輸入文字的變化,p中會同步顯示相同的文字內容;在js或控制台顯式的修改 obj.hello 的值,檢視會相應更新。

這樣就實現了 model => view 以及 view => model 的雙向繫結。

vue有v-model指令表示資料的雙向繫結

當input的message值變動後,data()裡的message值也會相應的變動,這樣的好處是,我們隨時拿到的都是最新的資料。

輸入框以及文字節點與 data 中的資料繫結,需要對 dom 進行編譯,這裡有乙個知識點:documentfragment。

documentfragment我也是才看到這裡,編譯過程不是很了解,所以就不寫出來了,以後對雙向繫結理解更深刻的時候,我再與大家分享。

vue雙向繫結原理

大家知道vue的雙向繫結原理是利用object.defineproperty 這一方法,以下是我研究該方法的一些內容 語法 object.defineproperty obj,prop,descriptor descriptor是將被定義或修改的屬性描述符,而雙向繫結是利用get和set屬性描述符。...

Vue雙向繫結原理

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

vue雙向繫結原理

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