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的响应式原理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！