Vue響應式系統之收集依賴原理。

2021-10-06 13:22:10 字數 858 閱讀 1625

舉個例子:

// 假設我們有多個vue物件

// 這個全域性變數需要在所有vue物件都能進行展示

let obj =

let vm1 =

newvue(}

`,data:obj})

let vm2 =

newvue(}

`,data:obj})

//這時候我們要物件全域性變數進行修改

//修改後還需要讓count知道是誰依賴了自己,然後count變更的時候通知依賴自己的物件(vm1、vm2)

//最後vm1、vm2進行檢視更新

obj.count =

1;

下面來實現依賴收集:

// dep訂閱者

class

depaddwatcherarr

(watcherarr)

}notify()

)}}// 觀察者

class

watcher

update()

}function

definereactive

(obj,key,val)

,set

:(newval)

=>})

}function

observers

(value)

object.

keys

(value)

.foreach

(key=>)}

class

vue}

newvue(}

)dep._this =

null

;// 清空上次依賴

vue的響應式系統 和響應式原理

web m v 組成 mvc 發生在後端 mvc 是一種使用 mvc model view controller 模型 檢視 控制器 設計建立 web 應用 model 模型 表示應用程式核心 比如資料庫記錄列表 view 檢視 顯示資料 資料庫記錄 controller 控制器 處理輸入 寫入資料...

vue響應式布局 Vue 響應式原理

vue2 的資料偵測 在 src observer 目錄裡面,元件例項在初始化時,會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法,從而讓 data 變成可響應...

vue響應式原理

響應式系統是vue框架核心的部分,資料物件僅僅是普通的 js物件。當我們改變資料時,檢視也會被改變,本文就來 一下vue 的響應式原理。vue響應式的核心是使用了es5 新增的api object.defineproperty 因此vue不支援ie8 object.defineproperty的作用...