VUE2 深度监听以及重写数组
在vue2中，实现监听主要用到的api为Object.defineProperty，提前声明一下，这个api不能监听数组的变化，只能监听对象的变化。因此，如果想要监听数组的变化，需要将数组转换成对象！
如果不了解这个api的，可以查看Object.defineProperty() - JavaScript | MDN (mozilla.org)
如何实现深度监听呢？简单来说，就是递归思想的实现。
function updateView() {
console.log("update");
}
// 定义核心Function
function defineReactive1(target, key, value) {
// 传过来，继续进行深度监听。
observer(value);
Object.defineProperty(target, key, {
get() {
return value;
},
set(newValue) {
if (value != newValue) {
// 如果是对象还要继续深度监听
observer(newValue);
value = newValue;
// 通知视图更新。
updateView();
}
}
})
}
// 遍历属性的api
function observer(target) {
// 如果不是对象就返回，这个函数的目的就是深度遍历对象属性。
if (typeof target !== 'object' || typeof target === null) {
return target;
}
// 遍历返回。
for (let key in target) {
defineReactive1(target, key, target[key]);
}
}
// test
let obj = {
name:'jack'
}
observer(obj);
obj.name = 'marry';
console.log(JSON.stringify(obj));
解释几点：
- observe的主要目的是如果键值还是对象，那么将继续监听。
defineReactive的主要作用是利用Object.defineProperty实现监听。因为有observe的api加持，所以能够确保defineProperty监听的值为基本值。
重写数组方法
Object.defineProperty是监听不了数组的，因此，如果需要监听数组，就需要将数组转换为对象。
let oldArrayProperty = Array.prototype;
const arr = Object.create(oldArrayProperty);
['push', 'pop', 'shift', 'unshift'].forEach((item) => {
arr[item] = function () {
// 首先得更新视图
updateView();
// console.log(JSON.stringify(this)+"88888"); 这里的this表示arr原型上面的知识
oldArrayProperty[item].call(this,...arguments)
}
})
function updateView() {
console.log("update");
}
// 定义核心Function
function defineReactive1(target, key, value) {
// 传过来，继续进行深度监听。
observer(value);
Object.defineProperty(target, key, {
get() {
return value;
},
set(newValue) {
if (value != newValue) {
// 如果是对象还要继续深度监听
observer(newValue);
value = newValue;
// 通知视图更新。
updateView();
}
}
})
}
// 遍历属性的api
function observer(target) {
// 如果不是对象就返回，这个函数的目的就是深度遍历对象属性。
if (typeof target !== 'object' || typeof target === null) {
return target;
}
// 数组的情况
if (Array.isArray(target)) {
target.__proto__ = arr
}
// 遍历返回。
for (let key in target) {
defineReactive1(target, key, target[key]);
}
}
// test
let obj = {
name: 'jack',
arr:[1,2,3]
}
observer(obj);
obj.name = 'marry';
obj.arr.push(7);
console.log(JSON.stringify(obj));
所以重写数组的基本思路是
- 先重写一个原型
- 把数组转换为对象。(直接换原型的指向，能够更改)
vue2实现深度监听的缺陷。
- 深度监听，需要递归到底，一次计算量大
- 无法监听新增属性/删除属性（所以需要使用 Vue.set 和 Vue.delete）
- 无法原生监听数组，需要特殊处理
在VUE3中使用proxy深度监听!
也有缺陷，兼容性问题。