Vue2和Vue3的响应式原理
Sonder
2022-08-15
1577字
4分钟
浏览 (1.9k)
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
}
})