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函数。
