VUE陣列響應式

2022-09-10 16:24:23 字數 1516 閱讀 2881

例如

let array = [1,2,3,4,5]

array.foreach((c,index) =>)

function

definereactive(obj, key, val) ,

set(newval)

})}

我們可以遍歷陣列,用陣列的索引作為 key,來給每一項打上getter/setter。

原因:如果你知道陣列的長度,理論上是可以預先給所有的索引設定 getter/setter 的。但是一來很多場景下你不知道陣列的長度

效能問題,陣列可能會很長,綜合考慮不對陣列屬性進行監聽

重寫了陣列原型鏈上的七種方法('push','pop','shift','unshift','splice','sort','reverse'),

在內部呼叫了陣列的原始方法,最後通過ob.dep.notify()更新檢視

var arrayproto =array.prototype;

var arraymethods =object.create(arrayproto);

var methodstopatch =[

'push',

'pop',

'shift',

'unshift',

'splice',

'sort',

'reverse'];

/** * intercept mutating methods and emit events

*/methodstopatch.foreach(

function

(method)

if(inserted)

//notify change

//更新檢視

ob.dep.notify();

return

result

});});

var arrayproto =array.prototype;

var arraymethods =object.create(arrayproto);

var methodstopatch =[

'push',

'pop',

'shift',

'unshift',

'splice',

'sort',

'reverse'];

/** * intercept mutating methods and emit events

*/methodstopatch.foreach(

function

(method)

if(inserted)

//notify change

//更新檢視

ob.dep.notify();

return

result

});});

observearray 會把陣列裡面的物件資料變成是可偵測的響應式資料

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

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

vue如何實現 陣列 的響應式

上原始碼,加上自己的理解 拿到陣列的原型 const arrayproto array.prototype 以陣列的原型建立乙個自己的物件,建立乙個物件作為 這裡暴露出去後會在 別處 使用到,用於對陣列型別原型的改變,使其在呼叫push等方法時會經過下面defineproperty中定義的方法,ex...

Vue 響應式屬性

本文參考自 1 概述 當建立乙個vue例項時,每個資料屬性 元件屬性等都是可以遍歷的,並為每個資料屬性新增了getter和setter。getter和setter允許vue觀察資料的更改並觸發更新。如果你在vue例項化後新增 或刪除 乙個屬性 例如在方法或生命週期鉤子中 vue是不知道它的。2 更新...