補充:

• 數(shù)組的響應式

// 對數(shù)組的方法進行重寫 // 1. 不能影響本來的方法 // 2. 調(diào)用的時候可以找到它 let odlArrayPrototype = Array.prototype; let proto = Object.create(odlArrayPrototype); // 繼承 ['push','shift','unshift'].forEach(method =>{proto[method] = function(){ // 函數(shù)劫持: 把函數(shù)進行重寫,內(nèi)部繼續(xù)調(diào)用老的方法updateView(); // 切片編程odlArrayPrototype[method].call(this, ...arguments);} })function updateView() {console.log('更新視圖'); }function observer(target) {if (typeof target !== 'object' || target === null) {return target;}if(Array.isArray(target)){ // 攔截數(shù)組,給數(shù)組的方法進行重寫target.__proto__ = proto;}Object.keys(target).forEach(key=>{defineReactive(target, key, target[key]);}) }function defineReactive(obj, key, value){observer(value);Object.defineProperty(obj,key,{get(){// get中會進行依賴收集return value},set(newVal){if(newVal !== value){observer(newVal);updateView();value = newVal;}}}) }// let data = { name: 'lz' ,age:{n:100} }; // observer(data); // data.age = {n:200}; // data.age.n = 300;let data = {name:'lz', age:[1,2,3]}; observer(data); data.age.push(4); data.age.push(5);

總結(jié)

以上是生活随笔為你收集整理的vue --- 2.0响应式补充的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。