Vue2和Vue3实现响应式的原理对比

Vue2中通过 Object.defineProperty 实现数据劫持，使得数据实现响应式更新。

Object.defineProperty简介：

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)obj：要定义属性的对象。
prop：要定义或修改的属性的名称或 Symbol 。
descriptor：要定义或修改的属性描述符。
返回值：被传递给函数的对象。

// 模拟Vue2实现响应式
// 源数据
        let person = {
            name:'张三',
            age:18
        }
        // 模拟Vue2中实现响应式
        let p = {}
        Object.defineProperty(p,'name',{
            get(){
                return person.name
            },
            set(value){
                console.log('有人修改了那么属性，调用set更新数据');
                person.name = value
            }
        })
        Object.defineProperty(p,'age',{
            get(){
                return person.age
            },
            set(value){
                console.log('有人修改了那么属性，调用set更新数据');
                person.age = value
            }
        })

Vue3通过ES6新增的Proxy方法实现响应式（该方法在window上）

// 模拟Vue3中实现响应式
        const p = new Proxy(person,{
            // 读取p的某个属性时调用
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`);
                return target[propName]
            },
            // 修改p某个属性或给p追加某个属性时调用
            set(target,propName,value){
                console.log(`有人修改了p上的${propName}属性，要修改为${value}`);
                target[propName] = value
            },
            // 删除p某个属性时调用
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性`);
                // 要返回一个删除状态
                return delete target[propName]
            }
        })

Proxy方法简介：

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

语法：const p = new Proxy(target, handler)

第一个参数：要代理哪一个数据（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

第二个参数：一个配置对象，里面包含 get，set，deleteProperty方法

get 接收俩个参数：1.源数据；2.读取了源数据的哪个属性；

set 接收三个参数：1.源数据；2.准备修改源数据的哪个属性；3.修改的值

deleteProperty 接收俩个参数：1.源数据；2.要删除源数据的哪个属性；