v3与v2的基本区别

• 一、修改vue2和vue3双向数据绑定原理
• 二、根节点的不同，template不再需要加一个元素包着内容了
• 三、Composition API (组合api)，像watch、compute需要引入才能调用
• 四、生命周期的变化
• 五、vue2和vue3的diff算法（更快，更小）
• 六、v-if 和 v-for的优先级，v2中v-for高于v-if，v3中则相反，而且两者还能在同一标签中使用

Vue3

// 1. Object.defineProperty => Proxy()
     // Vue2.x data中的属性做了遍历 + 递归, 给每一个属性设置getter, setter
     // data中预定义属性做出响应式

     // 2. Proxy()
     // 2.1 监听是针对一整个对象(完全代理所有属性)
     // 2.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] // 真，假
        }
     })

Vue2

 let obj = {
                name: '小明'
            }
            let val = 20
            Object.defineProperty(obj, "age", {
                get() {
                    console.log(`age属性被读取${val}`)
                    return val;
                },
                set(newVal) {
                    console.log(`age属性被修改了，新值${newVal}`)
                    val = newVal
                }
            })