vue如何實現 陣列 的響應式

2021-10-22 17:45:34 字數 666 閱讀 9786

上原始碼,加上自己的理解:

// 拿到陣列的原型

const arrayproto = array.prototype

// 以陣列的原型建立乙個自己的物件,《建立乙個物件作為***》

// 這裡暴露出去後會在 別處 使用到,用於對陣列型別原型的改變,

// 使其在呼叫push等方法時會經過下面defineproperty中定義的方法,

export

const arraymethods = object.

create

(arrayproto)

// --------①

// 羅列出需要改變的方法,《改變陣列自身內容的7個方法》

Vue到底如何實現陣列響應式的?

大家都知道,vue2.0 實現資料響應式主要是依賴object.defineproperty這個api,可實際上 defineproperty 不能監聽陣列變化,可是我們在vue中運算元組資料的時候,也能實現響應式更新,這是為什麼呢?翻開 vue 原始碼 中的 src core observer a...

VUE陣列響應式

例如 let array 1,2,3,4,5 array.foreach c,index function definereactive obj,key,val set newval 我們可以遍歷陣列,用陣列的索引作為 key,來給每一項打上getter setter。原因 如果你知道陣列的長度,理...

vue的響應式實現原理

vue2.0的雙向資料繫結主要實現方式就是 發布訂閱 資料劫持 這裡來手寫乙個實現過程,發布訂閱 資料劫持 訂閱器模型 let dep 為何不是陣列?深拷貝與淺拷貝,使用陣列需要key來進行查值 新增訂閱者 listen function key,fn 發布訊息 trigger function v...