vue2数据响应式原理(6) 处理数组特殊遍历

news2024/12/24 21:41:47

打开一直在写的案例
然后找到src下的 dataResp.js
这里我们Observer中数数组和对象还是要分开处理因为他们还是有所不同
我们修改 Observer 类代码如下

class Observer{
    constructor(value) {
        //相当于  给拿到的对象  其中的__ob__绑定 值为thsi,在类中用this 表示取实例本身给__ob__赋值  最后一个enumerable为false 表示属性不参与for遍历
        def(value,'__ob__',this,false);
        if(Array.isArray(value)){
            Object.setPrototypeOf(value, arrayMethods);
            this.observeArray(value);
        }else{
            this.walk(value);
        }
    }
    walk(value) {
        for(let key in value){
            defineReactive(value,key);
        }
    }
    observeArray(arr) {
        for(let i = 0;i < arr.length;i++) {
            observe(arr[i]);
        }
    }
}

这里我们判断到数组时会去调用observeArray 传递的参数value就是数组本身

然后我们observeArray 拿到数组也就是将他变量重新去调用observe 保证每一个下标都继续去递归处理响应式

然后我们看到 Arrays.js 数组的方法中有几个比较特殊的存在
push unshift splice 他们都会在特殊位置插入一些数据

我们将 Arrays.js 代码更改如下

import { def } from './def.js';

const arrayPrototype = Array.prototype;

export const arrayMethods = Object.create(arrayPrototype);

const redefineArrayMethod = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]

redefineArrayMethod.forEach(item =>{
    const backupFunction = arrayPrototype[item];
    def(arrayMethods,item,function(){
        const result = backupFunction.apply(this, arguments);
        const ob = this.__ob__;
        const args = [...arguments];
        let inserted = [];
        switch (item) {
            case "push":
            case "unshift":
            inserted = args;
            break;
            case "splice":
                inserted = args.slice(2);
            break;
        }
        if(inserted){
            ob.observeArray(inserted);
        }
        console.log('数组执行了',item,'操作，值被修改为',this);

        return result;
    },false);
})

重点是 redefineArrayMethod.forEach 中 def第三参数中函数的变化

我们先拿到数字的__ob__字段这里我们说过 __ob__存的是Observer声明出来的类对象

然后用args储存方法访问的参数例如 push 我们这里就是存push中的内容将push中的参数转成一个数组存给args

然后我们定义了一个 inserted 主要就是记录一下有没有插入的下标

然后我们通过switch 确定方法的类型如果是push unshift 那么参数肯定是都要用来添加到数组中的直接等于用inserted去存就好了
但splice第二个参数才是要插入的值

如果是空的就算了

然后我们将新插入的下标也扔给了__ob__类对象中的observeArray让新下标也带有响应式

那么写完了我们要如何测试有没有效果呢？

我们来到output.js 改写代码如下

import { observe } from "./dataResp"
const output = () => {
    var obj = {
        data: {
            data: {
                map: {
                    dom: {
                        isgin: true
                    }
                },
                arg: 13
            },
            name: "小猫猫"
        },
        bool: [1,2,3,4]
    };
    observe(obj);
    obj.bool.splice(2,1,[88,99]);
    document.getElementById("text").innerHTML = obj.data.name;
}

export default output