Vue原理之Object.defineProperty和Proxy分析

在数据变化时重新render依赖相关函数(组件)，从而更新视图。

简单来说就是当我们某一个数据对象的属性发生变化时，能被Vue框架所监测到， 比如使用属性的时候会监测到某对象的某属性被读取了，当该属性发生变化时，会监测到该属性被修改了， 再加上一些额外的一些处理逻辑，最终去更新视图。

在ES6之前，我们是只能通过Object.defineProperty可以将对象的某个属性设置get 和 set 函数来监测其属性值的变化，以下是简单的示例代码：

复制const obj = {
    name: 'VapausQi',
    age: 18
}

let value = obj.name;
Object.defineProperty(obj, 'name', {
    get() {
        console.log('name被读取了，name的值为：', value); 
        return value;
    },
    set(val) {
        if (val !== value) {
            console.log('name被修改了，name的值为：', val); 
            value = val;
        }
    }
});

obj.name;   
obj.name = 'XiaoQi'; 

由于Object.defineProperty 是对对象属性的监听，所以他就必须要去深度遍历所监测的对象。所以vue2中就会有一个类似观察者的一个函数去深度监听我们所定义的对象的每一个属性，简易代码如下：

复制function isObject(v) {
  return typeof v === 'object' && v !== null;
}

function observe(obj) {
    for(const key in obj) {
        let value = obj[key];
        if(isObject(value)) {
          
          observe(value);
        }
        Object.defineProperty(obj, key, {
            get() {
                console.log(key, '读取了'); 
                return value;
            },
            set(val) {
                if (val !== value) {
                    console.log(key, '修改了'); 
                    value = val;
                }
            }
        });
    }
}
observe(obj);

通过observe函数监测到的对象都是具备响应式的。但这里目前是存在缺陷的。

1、 当我们开始定义的对象是数组时，数组的方法并不会触发set函数，比如push、pop、shift、unshift、splice、sort、reverse等，所以vue2中为了解决这个问题，就重写了数组的方法，当调用数组的方法时，会触发set函数。（这个暂时不详细说明）

2、我们定义的对象如果初始化不具备某个属性的时候，再通过代码添加某一属性时，是不会被observe函数监测到的。

复制const obj = {
    name: 'VapausQi',
    age: 18
}
observe(obj);
obj.gender = '男'; 
delete obj.age; 

如上所示，当我手动给obj添加一个gender属性或者手动删除某一个属性时，是不会触发set函数的，所以vue2中为了解决这个问题，就提供了Vue.set方法和Vue.delete方法，我们需要使用这两种方法来使我们上述对对象属性的操作被观测者函数观测到，进而具有响应式，总体来说还是比较麻烦的。

Proxy是ES6新增的一个特性，它可以用来定义一个对象的代理，从而拦截和自定义对象的基本操作，比如属性的读取、赋值、枚举、函数调用等。示例代码如下：

复制const obj = {
    name: 'VapausQi',
    age: 18
}

const proxy = new Proxy(obj, {
    get(target, k) {
        console.log(k,'被读取了，值为:', target[k]);
        return target[k];
    },
    set(target, k, val) {
        if(val !== target[k]) {
            target[k] = val;
            console.log(k,'被修改了，值为:', target[k]);
        }
    },
    deleteProperty(target, k) {
        console.log(k, '被删除了');
    }
})

proxy.name
proxy.name = 'XiaoQi'
delete proxy.name

在vue3中，我们常常能听到一个词：代理对象，这个代理对象就是通过proxy实现的。响应式对象并不操作原对象，所有的逻辑都是针对此代理对象进行的。这也是为什么我们在vue3工程中打印我们定义的一些对象信息时，会发现都会带[Proxy]的前缀标识。 由于不用去监听属性了，所以不用去深度遍历了，同时由于监听的是对象，所以新增的属性也会被监听到，所以Proxy解决了vue2中存在的缺陷，而删除属性也可以通过proxy的deleteProperty函数监听到。

接下来简单模拟vue3中的观察者函数：

复制function isObject(v) {
  return typeof v === 'object' && v !== null;
}

function observe(obj) {
    const proxy = new Proxy(obj, {
        get(target, k) {
            if (isObject(target[k])) {
                return observe(target[k]);
            }
            console.log(k,'被读取了，值为:', target[k]);
            return target[k];
        },
        set(target, k, val) {
            if(val !== target[k]) {
                target[k] = val;
                console.log(k,'被修改了，值为:', target[k]);
            }
        },
        deleteProperty(target, k) {
            console.log(k, '被删除了');
        }
    })
    return proxy;
}