Vue3中实现响应式原理
Vue3中使用ES6中的Proxy来实现响应式,并通过Reflect操作源对象内部的数据
模拟Vue3响应式
1. 准备环境
创建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
2 js创建person对象
<script>
let person = {
name:"张三",
age: 18
}
</script>
3 proxy对象使用
new Proxy(object,handler)
object 要代理的对象
handler 处理动作
const p = new Proxy(person,{
get(target,propName){
console.log("获取"+propName+"属性值")
return target[propName]
},
set(target,propName,value){
console.log(propName+"属性值改变了")
target[propName] = value;
},
deleteProperty(target, propName) {
console.log(propName+"属性值删除了")
return delete target[propName]
}
});
4.使用Reflect对象修改值
const p = new Proxy(person,{
get(target,propName){
console.log("获取"+propName+"属性值")
//return target[propName]
return Reflect.get(target,propName)
},
set(target,propName,value){
console.log(propName+"属性值改变了")
//target[propName] = value;
Reflect.set(target,propName,value)
},
deleteProperty(target, propName) {
console.log(propName+"属性值删除了")
//return delete target[propName]
return Reflect.deleteProperty(target,propName)
}
});
总结
- Vue2中使用Object对象的功能实现响应式,不能对对象直接增加属性和对数组指定角标修改,需要使用变通方法修改
- Vue3中使用Proxy+Reflect实现响应式,不存在vue2中的问题
