vue3-响应式的原理

1. Object.defineProperty => Proxy()

Vue2.x data中的属性做了遍历 + 递归, 给每一个属性设置getter, setter
data中预定义属性做出响应式

2. Proxy()

• 1. 监听是针对一整个对象(完全代理所有属性)
• 2.在目标对象之前假设一层拦截 => 外界访问该对象，必须通过这层拦截

//  响应式重要特征 => 需要捕获到修改，做出对应的反应
     let obj = {
         name: '小明',
         age: 18
     }
     const p = new Proxy(obj, {
         // target => 源数据
         // 查
        get(target, propName){
            console.log(`读取了P的${propName}属性`)
            return target[propName]
            // return Reflect.get(target, propName)
        },
        // 改 + 增
        set(target, propName, value){
            console.log(`修改了P的${propName}属性，值为${value}`)
            target[propName] = value
        },
        // 删
        deleteProperty(target, propName){
            console.log(`删除了P的${propName}属性`)
            return delete target[propName] // 真，假
        }
     })

为什么要用 Proxy API 替代 defineProperty API

• 1.defineProperty 的局限性的最大原因是它只能针对单例属性做监听，Vue2.x
  中对 data 中的属性做了遍历 + 递归，为每个属性设置了getter、setter。
  这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
• 2.Proxy 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，
  这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。