img

Vue2和Vue3的响应式原理

2022-08-15 0条评论 1.3k次阅读 JavaScript


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
                }
            })
🏷️ #面试

💬 COMMENT


🦄 支持markdown语法

👋友