例如
let array = [1,2,3,4,5]array.foreach((c,index) =>)
functiondefinereactive(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 更新...