vue2 是怎麼實現響應式的

2021-10-23 11:29:22 字數 348 閱讀 3173

今天看了一下vue到底是怎麼實現響應式的,發現特別簡單, 就是使用了  object.defineproperty 這個函式來進行監聽,

var vm = {};

var data =

var key , value;

for ( key in data) ,

set: function(newvalue)

})})(key)

}

第乙個引數相當於乙個vue例項,第二個引數就是data的key,第三個引數就是乙個物件,物件中包含了get和set兩個函式,分別監聽獲取和修改

在控制台獲取和修改值就會列印出get和set

Vue3 和 Vue2 的響應式原理區別

vue2響應式是通過object.defineproperty 劫持各個屬性 getter 和 setter,在資料變化時發布訊息給訂閱者,觸發相應的監聽 存在幾個問題 初始化時需要遍歷物件所有 key,如果物件層次較深,效能不好 通知更新過程需要維護大量 dep 例項和 watcher 例項,額外...

Vue3響應式原理與Vue2的對比

源資料 let person region 模擬vue2中實現響應式 let p object.defineproperties p,name 有人修改name時呼叫 set value object.defineproperties p,age 有人修改name時呼叫 set value endr...

vue2原始碼 響應式處理(學習筆記) 2

index.html檔案 一下是手寫vue的js邏輯 檔案層層下去乙個個建就好了 import from init function vue options 擴充套件原型 initmixin vue export default vue import from state export functi...