我对vue3的理解

我对 reactive源码的理解

reactive 只能够代理对象
首先它判断传递过来的值是否是对象，如果是才会进行代理。变成响应式的。
Proxy 并没有重写对象的属性，只做代理，在取值的时候回调用get,设置值的时候回调用set方法
在get的时候使用了 Reflect.get(target,key)方法
在set的时候使用了  Reflect.set(target,key,value)方法
为什么要这样做？因为这样可以保证this的指向是代理对象
let target = {
    name: 'zhangsan',
    get say() {
        console.log('返回的值',this.name)
        return this.name
    }
}
const proxy=  new Proxy(target, {
    get(target, key) {
        console.log('取值这里也会被触发')
        return Reflect.get(target,key)
    },
    set(target,key,value) {
        return Reflect.set(target, key,value)
    }
})
console.log(proxy )

weakMap解决同一个对象被代理多次浪费性能

let state={
    name:'xxx',
    age:123
}
let state1=reactive(state)
let state2=reactive(state)
console.log( state1===state2 ) true
如果同一个对象被代理多次会浪费性能。
怎么处理这个问题呢？
利用缓存，使用了 weakMap
为什么要使用了weakMap 呢？
weakMap是弱引用，不会造成内存泄漏
weakMap 和 map很像，但是weakMap的key只能够是对象
这样就实现了 同于一个对象被多次代理，返回同一个代理

代理的对象再次被代理

let state={
    name:'xxx',
    age:123
}
let state1=reactive(state)
let state2=reactive(state1)
怎么解决这个问题了

代理对象被再次代理，可以直接返回，不需要代理了。
它最初是用了 IS_REACTIVE这个字段
会检测代理对象是否有这个字段，如果有，说明这个对象被代理了。
不再需要代理了，直接返回就可以了

vue3 性能方便的提升

1.ref API 的读效率提升 260%，写效率提升约为 50% 。
2.依赖收集的效率提升 40%
3.内存占用减少 17% 。

你对Proxy的理解

Proxy 对象用于创建一个对象的代理，
从而实现拦截和自定义（如属性查找、赋值、枚举、函数调用等）
Proxy并不是深层代理，proxy只会代理第一层。
Vue3中reactive的实现，其实是递归的将对象全部都代理了一遍。

Proxy解决了什么问题

Object.defineProperty无法直接监听对象新增或删除的属性。Proxy可以。
Object.defineProperty我们无法让Map、Set这类数据类型转变为响应式，Proxy可以。