Vue響應式原理

2021-10-25 10:36:21 字數 993 閱讀 5113

目錄

vue中的資料發生改變的時候,模板對應的值也會改變,渲染成新的資料

object.defineproperty(obj, prop, descriptor)
當新建乙個vue物件的時候,把data中的資料掛載到vue中,遍歷迴圈資料,用defineproperty 方法監聽物件屬性的變化,defineproperty 中有get和set方法

object.keys(obj).foreach(key => ,

get()

})})

響應式物件,核心就是利用object.defineproperty給資料新增了 getter 和 setter,目的就是為了在我們訪問資料以及寫資料的時候能自動執行一些邏輯:getter 做的事情是依賴收集,setter 做的事情是派發更新

在dependence(發布者中)記錄誰要訂閱本屬性,並且通過notify找到這個方法的訂閱者,通知所有的訂閱者updated更新資料。

在watcher中,記錄訂閱者,並且更新資料。

每新建乙個data/props就 新建乙個dep發布者物件,發布者通過addsub把這個data資料的所有的訂閱者放在陣列中,通過object.defineproperty 監聽資料的變化,在監聽到變化之後呼叫notify方法,使得這屬性的所有的訂閱者更新資料。

class dependence,

addsub(watcher) ,

notify() )

}}//訂閱者

class watcher

update()

}const dep = new dependence()

const watcher = new watcher("訂閱者")

const watcher1 = new watcher("訂閱者1")

dep.addsub(watcher)//將訂閱者放在陣列中

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的作用...

vue響應式原理

要了解響應式原理首先應該知道什麼是響應式 更改 vue的響應式原理是什麼 vue資料的雙向繫結是通過資料劫持結合發布訂閱模式,偵測到資料變化,然後通過object.defineproperty 物件對每個屬性的getter和setter進行劫持。當讀取 data 中的資料時自動呼叫 get 方法,當...