vue原始碼學習 vue雙向繫結原理

2021-10-05 00:14:56 字數 1625 閱讀 2253

vue充分利用了object.defineproperty()方法，通過發布訂閱模式，在對data屬性的讀寫操作，轉換成get/set方法，當資料變化時通知檢視更新。

定義：object.defineproperty()是直接在物件上定義乙個新屬性或者可以直接修改乙個現有屬性，並返回該物件。

let demo=


object.


defineproperty


(demo,


"test",,


set(newvalue)})


demo.test //test屬性被讀取 "newtest"


demo.test=


"test123"


//test屬性被重置為test123 "test123"
通過上面例子可以發現，demo物件訪問test屬性時候，會先訪問object.defineproperty()中get方法，修改時會訪問set方法。

這樣我們就可以觀察到物件中屬性讀寫的變化。

如果我們想對demo中的所有屬性進行監測，需要對屬性進行遍歷，然後觀察：

//遍歷物件屬性，觀察值變化


function


observable


(obj)


}//單個屬性監測


function


definereactive


(obj,key)


屬性被讀取了`);


return obj[key];}


,set


(newval)


屬性被修改了`);


val = newval;}}


)}
在資料被讀或寫的時候通知那些依賴該資料的檢視更新了，為了方便，我們需要先將所有依賴收集起來，一旦資料發生變化，就統一通知更新。其實，這就是典型的「發布訂閱者」模式，資料變化為「發布者」，依賴物件為「訂閱者」。

建立訊息訂閱：

class


dep,


//增加訂閱者


addsub


(sub)


,//判斷是否增加訂閱者


depend()


},//通知訂閱者更新


notify()


)}}dep.target =


null


;
將訂閱方法，增加至definereative方法中：

function


definereactive


(obj,key,val)


屬性被讀取了`);


return val;},


set(newval)


屬性被修改了`);


dep.


notify()


//資料變化通知所有訂閱者}}


vue 原始碼之雙向繫結
vue 雙向繫結，問就是 object.defineproperty 劫持資料獲得狀態變更，發布訂閱者模式進行變更通知。好吧，現在地球人都知道這兩句話了，要是別人再問你實現細節，我們應該如何回答呢。也是為了讓自己更加了解，從自己大概知道和能與人清楚表達，這就是今天寫文章的目的了。閱讀前，你需要具備 ...


Vue雙向繫結
把乙個普通物件 a 傳給 vue 例項作為它的 data 選項，vue.js 將遍歷它的屬性，用object.defineproperty 將它們轉為 getter setter,如圖綠色的部分所示。每次使用者更改data裡的資料的時候，比如a.b 1，setter就會重新通知watcher進行變動...


Vue 雙向繫結
在react或者vue這類mvvm框架中使用雙向繫結是很常見的需求，最近專案中在使用vue，今天來談一談vue中雙向繫結的實現。先來說幾句廢話 什麼是雙向繫結？把model中的資料繫結到view中，然後更新model時view會自動跟新，這叫單向繫結，而當使用者改變view時model中資料也能自動...