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));

所以重写数组的基本思路是

1. 先重写一个原型
2. 把数组转换为对象。(直接换原型的指向，能够更改)

vue2实现深度监听的缺陷。

1. 深度监听，需要递归到底，一次计算量大
2. 无法监听新增属性/删除属性（所以需要使用 Vue.set 和 Vue.delete）
3. 无法原生监听数组，需要特殊处理

在VUE3中使用proxy深度监听!

也有缺陷，兼容性问题。