// 監控陣列的變化
// 主要要做的就是攔截使用者呼叫的push、shift、unshift、pop、reverse、sort、splice 導致原陣列發生變化
// concat ...
// 先獲取老的陣列的方法，只改寫這7個方法
let oldarrayprotomethods = array.prototype;
// 拷貝的乙個新的物件，可以查詢到老的方法
export let arraymethods = object.create(oldarrayprotomethods);
let methods = ["push", "shift", "pop", "unshift", "reverse", "sort", "splice"];
export function observerarray(inserted)
if(inserted) observerarray(inserted);
console.log("呼叫了陣列的更新的方法了");
return r;
};});// export匯出的是變數或者介面
// export default 匯出的是具體的值
// vue中的刪除使用的是vm.$delete 而不建議使用delete來進行刪除。
import vue from 'vue';
let vm=new vue(,
arr:[1,2,3]}},
computed:,
watch:
})// 對原生的方法進行劫持
console.log(vm.arr.push(123),vm.arr);
//什麼樣的陣列會被觀測
// [0,1,2] observe 不能直接改變索引 不能被監測到
// [1,2,3].length-- 因為陣列的長度變化 我們沒有監控
// 內部會對陣列裡的物件進行監控
// .push /shift unshift 這些方法可以被監控 vm.$set 內部呼叫的就是陣列的splice方法
// 陣列劫持的兩個缺點：1.不能對陣列的索引進行監控，2.不能通過length來改變陣列。 因為陣列的長度變化，我們不會監控到的。
import from "./array";
import from "./index";
export function definereactive(data, key, value) [1,2,3]
object.defineproperty(data, key, ,
set() ,
});}class observer
this.walk(data);
} walk(data)
}}export default observer;
let arr=[1,2,3];
arr.splice(0,1,100);
console.log(arr);
vue 中 陣列劫持
vue中物件劫持 object.defineproperty obj,prop,descriptor 1 obj 必需。目標物件 2 prop 必需。需定義或修改的屬性的名字 3 descriptor 必需。目標屬性所擁有的特性 這個介紹的比較多，就不展開了。vue中陣列劫持 劫持push方法 le...
vue 資料劫持
其實，並沒有這麼 神奇 的事，資料劫持的核心就是在 物件的身上重新定義被 物件所有可列舉屬性，並設定 getter 和 setter 監視著它的變化，然而實現這個核心功能就是乙個方法 object.defineproperty 通過該方法在例項物件上重新定義了和data物件裡面的所有屬性，然而就實現...
vue中的資料劫持
在瀏覽一篇博文的時候，看到裡面提到了vue中資料劫持的概念，之前只是知道有這個東西，知道這個東西是vue的核心之一，是實現資料雙向繫結的重要原理，但並未深入研究，那麼今天就借這篇文章學習整理一下vue中的資料劫持到底是什麼。在面經中最常見的問題之一就是，你知道雙向繫結嗎，知道什麼是mvvm嗎？學術性...