前端培训丁鹿学堂：vue2和vue3的响应式原理对比

vue2的响应式原理

简单一句话：通过数据劫持 defineProperty + 发布订阅者模式。
对象类型的数据：通过defineProperty对数据的读取和修改做拦截。这种拦截就叫数据劫持。
对象的数组比较特殊，vue针对可以更新数组的方法进行了重写，进行数据劫持。
简略的伪代码：

Bojcet.defineProperty(obj,'age',{
  get(){},
  set(){}
})
1
2
3
4

缺陷：

1. 新增属性，删除属性的时候，界面不会更新
2. 直接通过下标修改数组，数据不会更新。

解决：使用$set的方法可以新增响应式数据，通过$delete删除响应式数据

this.$set(this.obj,'name','zhangsan')
this.$delete(this.obj,'age')
this.$set(this.arr,0,'hhhh') // 数组修改，key改为数字下标即可
1
2
3

vue3的响应式原理

vue3利用poxy代理来实现数据的响应式。
方法的参数1target是代理的对象，propsvalue是修改的属性名，value是修改的属性（如果有）
Reflect是es6新增的一个属性，可以理解为增删改的另一种写法，返回值是布尔值（是否操作成功），vue3中使用它来读取和修改数据。

let person = {
    name:'zhangsan',
    age:18
}
let proxyPerson = new Proxy(person,{
    get(target,propsValue){
        // 触发读取监听
        return target[propsValue]
    },
    set(target,propsValue,value){
        // 触发修改监听
        target[propsValue] = value
    },
    deleteProperty(target,propsValue){
        // 触发删除监听
        return delete target[propsValue]
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18