defineProperty和Proxy的区别
不管你有没有用过vue，都应该或多或少了解一下vue的使用原理，也就是我们常说的数据劫持。vue2中使用的是Object.defineProperty，而vue3中使用的是Proxy。defineProperty利用defineProperty实现了一个简单的数据劫持（数据监控）。constwatch=(target,property,callback)=>{//在这里添加一个_value字段用于临时存储let_value=target[property];Object.defineProperty(target,property,{get(){return_value;},set(newVal){constoriginal=_value;//这里将值赋给_value而不是target[property]的目的是为了防止无限loop//target[property]=newVal将触发set_value=newVal;callback&&callback(newVal,original);}});}//测试//html
//jsconstdata={};//defineProperty只能监控一个对象的单个属性。如果需要监听所有属性，需要遍历添加watchwatch(data,'text',(newVal)=>{text.innerText=newVal;});input.oninput=(e)=>{data.text=e.target.value;}Proxy同样，我们使用Proxy来实现一个watch。constwatch=(target,callback)=>{returnnewProxy(target,{get(target,property){returntarget[property];},set(target,property,value){constoriginal=target[property];}target[property]=value;callback&&callback(value,original);}});}//测试//html
//Proxy和defineProperty的使用方式略有不同//代理实例必须被操作才能触发数据劫持constdata={};constp=watch(data,(n,o)=>{text.innerText=n;});input.oninput=(e)=>{p.text=e.target.value;}好像很多可以写很多词来描述这些比较。后面想想直接对比表可能就更清楚了。definePropertyProxy这个特性是否可以监听数组的变化（数组的几个常用方法在vue中被hack）是否可以劫持整个对象？支持IE操作时，是否直接操作原始对象（需要操作Proxy实例）可以劫持get、setget、set、defineProperty、has、apply等13种操作
