vue3的响应式原理是通过Proxy(代理)，对对象的属性值进行读写、添加、删除并进行劫持，通过Reflect(反射)动态对被代理的对象属性进行特定的操作，由于Proxy和Reflect不支持IE浏览器，这也是Vue3
不支持IE浏览器的主要原因之一。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>proxy</title>
</head>
<body>
<script>
//目标对象
let category={
title:"烤串",
isShow:true
};
//proxy把目标对象转化成代理对象
//参数1：目标对象
//参数2：处理器对象，用来监听数据，及操作数据
let proxyCategory=new Proxy(category,{
//监听取值，第一个参数目标对象，第二个参数被获取的属性名
get(target,prop){
// console.log(target,prop);
// return target[prop];//不推荐
//使用Reflect为了优化Object的一些操作方法以及合理的返回Object操作返回的结果
return Reflect.get(target,prop);
},
//监听设置值
set(target,prop,val){
// console.log(target,prop,val);
// target[prop]=val;//不推荐
return Reflect.set(target,prop,val);
},
//监听删除delete
deleteProperty(target,prop){
console.log(target,prop);
// delete target[prop];不推荐
return Reflect.deleteProperty(target,prop);
}
});
console.log(proxyCategory.title);
proxyCategory.title="饮料";
console.log(proxyCategory.title);
console.log(category.title);
delete proxyCategory.isShow;
console.log(category);
</script>
</body>
</html>
网友评论