vue2与vue3响应式原理的区别

1.1 响应式原理

vue2

利用Object.keys()获取值对象属性，

Object.defineProperty进行数据劫持，即重写getter和setter，当数据改变的时候通知订阅者去改变。

代码：

let person = {
            name: 'k',
            age: 18
        }
let p = {}
Object.keys(person).forEach(item => {
            Object.defineProperty(p, item, {
                get() {
                    // 用来获取name 属性的数据
                    console.log('获取值');
                    return person[item]
                },
                set(value) {
                    // 用来改变name 属性的值
                    console.log(`${item}的值被改变了,通知页面改变数据`);
                    person[item] = value
                }
            })
        })

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f23kFCq4-1638101774999)(C:\Users\fxk\AppData\Roaming\Typora\typora-user-images\1638090543050.png)]

缺陷：不能监听数据的增加删除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEZdObSs-1638101775006)(C:\Users\fxk\AppData\Roaming\Typora\typora-user-images\1638090883271.png)]

Vue3

通过Proxy代理，其中读取，删除，获取。使用是window中的反射属性Reflect，可以监听对象数据的增删改查（仅是对象类型的响应式原理不同，基本数据类型使用的还是defineProperty）

let person = {
            name: 'k',
            age: 18
        }

let p = new Proxy(person, {
            //读取
            get(target,propName) {
                console.log(`有人读取了${propName}`);
                return Reflect.get(target,propName)
            },
            //增加或者修改
            set(target,propName,value) {
                console.log(`有人修改了${propName}`);
                Reflect.set(target,propName,value)
            },
            //删除
            deleteProperty(target,propName) {
                console.log(`有人删除了${propName}`);
                Reflect.deleteProperty(target,propName)
            }
        })