丁鹿学堂：2023前端学习指南之vue3的数据响应式原理总结

js的普通对象

如果定义一个普通对象，修改对象的值，不会影响别的元素。

const obj = {
    name:'丁鹿',
    age:20
}
obj.name = '前端'

如果想要在修改对象的元素的同时，去触发一些别的操作，我们需要把对象进行改造。

在vue3中，使用的是代理模式。

给普通对象创建代理

// 创建一个对象
const obj = {
    name:'丁鹿',
    age:20
}
const handle = {
    get(target,prop,recevier){
        console.log('数据读取了，做一些操作');
        return target[prop]
    },
    set(target,prop,value,recevier){
        target[prop] = value
        console.log('数据被修改了，可以做一些操作')
    }
}
const proxy = new Proxy(obj,handle)
proxy.age = 19

1 handle是给对象指定的代理对象，obj是被代理的对象。handel用来指定代理的行为。

2 在js中内置了Proxy这个类，可以创建代理。proxy这个代理，本身就有obj的属性。

handle代理对象分析

handler里面有特殊的语法，

1 get方法

通过代理去读取obj数据的时候，会触发get方法，它的返回值就是最终读取的值。

get方法有3个参数，第一个是target，是被代理的对象obj，第二个是读取的属性名，第三个是proxy代理对象。

2 set方法

如果通过代理去修改obj的值，会触发set方法。

get方法有4个参数，第一个是target，是被代理的对象obj，第二个是修改的属性名，第三个是修改指定的属性值。第四个是proxy代理对象。

通过get方法处理修改的操作。

注意：

如果不设置get和set，不会做任何操作，如果设置了get和set，读取和设置属性的时候，会调用这些方法。

我们在返回读取和修改的值的时候，可以做一些操作，就实现了数据的监听。

vue3的数据响应式原理

在vue3中，通过data()返回的对象数据，会被vue代理。

vue代理以后，当我们通过代理去读取属性时，在返回值之前，vue会进行一些跟踪操作，在vue中是track函数，它会记录使用数据的元素。

当通过代理去修改属性时，会触发之前所有使用该属性的元素，进行数据更新。在vue中是trigger函数。