Javascript

Vue3的响应式原理

本文主要是介绍Vue3的响应式原理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

vue3.0中的响应式原理
解决了vue2中存在的问题
新增属性,删除属性,界面不会更新
直接通过下标修改数组,界面不会更新


实现原理:
通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除等
通过Reflect(反射): 对被代理对象的属性进行操作。
MDN文档中描述的Proxy与Reflect:
let data = {
name:'小米',
age:15,
address:'杭州'
}
// Reflect 映射
let p = new Proxy(data,{
// 有人读取了data中某个属性
get(target,propName){
console.log(`有人读取了${propName}的属性`)
return Reflect.get(target,propName)
},
// 有人修改和添加了data中某个属性
set(target,propName,value){
console.log(`有人修改了${propName}属性,我要去更新界面`)
Reflect.set(target,propName,value)
},
// 有人删除了data中某个属性
deleteProperty(target,propName){
console.log(`有人删除了${propName}属性,我要去更新界面`)
return Reflect.deleteProperty(target,propName)
}
})

这篇关于Vue3的响应式原理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!