天天看點

前端學習筆記 - vue資料雙向綁定的原理,用了什麼設計模式?vue删除資料監測不到?

傳回目錄

vue雙向綁定原理(設計模式MVVM)

vue.js采用資料劫持結合釋出者-訂閱者模式的方式實作雙向綁定,通過Object.defineProperty()來劫持各個屬性的setter、getter,在資料變動時釋出消息給訂閱者,觸發相應的監聽回調。

其中最核心的方法便是通過Object.defineProperty()來實作對屬性的劫持,那麼在設定或者擷取的時候我們就可以在get或者set方法裡加入其他的觸發函數,達到監聽資料變動的目的。

每個元件執行個體都有相應的watcher執行個體對象,它會在元件渲染的時候把屬性記錄為依賴,之後當依賴的setter被調用時,會通知watcher重新計算,進而緻使它關聯的元件得以更新。是以,每當資料變化的時候會引起視圖的變化,更新view。
           

vue如何實作雙向綁定

前端學習筆記 - vue資料雙向綁定的原理,用了什麼設計模式?vue删除資料監測不到?
1、observer用來實作對每個vue中的data中定義的屬性循環用Object.defineProperty()實作資料劫持,以便利用其中的setter和getter,然後通知訂閱者,訂閱者會觸發它的update方法,對視圖進行更新。

2、在vue中v-model、v-name、{{}}等都可以對資料進行顯示,也就是說加入一個屬性都通過這三個指令了,那麼每當這個屬性改變的時候,相應的這個三個指令的html視圖也必須改變,于是vue中就是每當有這樣的可能用到雙向綁定的指令,就在一個Dep中增加一個訂閱者,其訂閱者隻是更新自己的指令對應的資料,也就是v-model='name'和{{name}}有兩個對應的訂閱者,各自管理自己的地方。每當屬性的set方法觸發,就循環更新Dep中的訂閱者。
           

vue删除資料監測不到?

因為Vue在初始化執行個體時會對屬性進行getter/setter轉化,這樣被轉化的屬性就是響應式的,而隻有在data中聲明的屬性會執行這個過程。是以,後續通過JavaScript傳過來的對象屬性因為沒有在data中聲明,是以并不會執行這個轉化過程,是以這些屬性全都是不響應式的。

也是因為這個原因,現在的Vue.js無法監聽到對象屬性的添加和删除,也無法檢測到數組的變動。
           

解決方法參照1

解決方法參照2

參考:

連結1

連結2