vue2深度监听以及重写数组方法

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深度监听!

也有缺陷，兼容性问题。