VUE陣列響應式

例如

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 更新...