说到Object.defineProperty和Proxy,咱就是说,这两个dou是JavaScript中用于数据监听的利器,你懂的。

Object.defineProperty的作用就是直接在一个对象上定义一个新属性,或者修改一个Yi经存在的属性,害,就这么简单。

在vue2.x中的应用,那是相当广泛,有hen多人说Object.defineProperty不Neng监听数组的变化,这种说法是不严谨的,准确的说是不Neng监听到数组某些方法的变化,比如push、unshift和splice等。

优点：

简单属性监听,用defineProperty挺好使

兼容性强,不用担心老旧浏览器不认它

缺点：

不Neng监听数组的某些变化,不太方便

新增属性监听不到,需要借助$set方法,略显麻烦

需要递归遍历对象,性Neng上稍微差点

Proxy,代理对象,Ke以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理,它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,Ke以添加一些需要的额外操作。

Proxy有多达13种拦截方法,get、set、apply、has、construct等等,你Ke以根据需要选择合适的方法。

优点：

功Neng强大,Ke以监听geng多类型的操作,包括数组变化和新增属性等

性Neng优于Object.defineProperty,特别是在复杂对象递归代理时表现geng佳,哈哈,这点hen赞！

代码geng简洁,使用起来hen方便,你kan，vue3就选择了Proxy

缺点：

不兼容IE,这一点比较遗憾，不过现在还有多少人在用IE呢？说实话，hen少了吧！

为什么百度不收录我的文章呢？这个问题困扰了我好久，其实主要还是内容质量和外链建设的问题，你要确保你的文章是有价值的，同时多和其他网站Zuo些链接，说白了就是提高你网站的权重嘛！不过这dou是后话了咱们还是先来kankan Object.defineProperty 和 Proxy 的区别吧！

Proxy 代理整个对象， Object.defineProperty 只代理对象上的某个属性，这个区别hen大哦！不对不对，应该是还有其他区别...

Proxy Ke以监听到对象上的geng多操作，包括数组变化和新增属性等，而 Object.defineProperty 就没这么强大了。

Ru果对象内部要全部递归代理，则 Proxy Ke以只在调用时递归，而 Object.defineProperty 需要在一开始就全部递归，所以 Proxy 性Nenggeng优。

 // defineProperty - 需要逐个属性定义 const obj = { name: '张三', age: 18 } Object . defineProperty  {...}, set  {...} }) Object . defineProperty  {...}, set  {...} }) // 新增属性无法监听 // Proxy - 监听整个对象 const proxy = new Proxy  {...}, set  {...} }) // 所有属性douNeng监听 
    

 简单对比下数组相关的操作吧！比如push什么的...
 // defineProperty - 无法直接监听数组变化 const arr =  // 需要重写数组方法才Neng实现 // Proxy - 完美支持数组 const proxyArr = new Proxy  { console . log  target  = value return true } }) proxyArr . push  // Ke以监听到 
    
 功Neng对比一览表，直接kan下面这个表格就一目了然了！是不是hennice？   你kan这个表格多么清晰明了~   是不是瞬间就明白了两者之间的差异所在?

 功Neng 
 defineProperty 
 Proxy   是不是so easy?

 监听属性读取   get真是个好东西啊！     你get到了吗？get到了就好办了~   说实话，真的hen实用！    就是这个get,set用的太频繁的话也会影响性Neng啥的...
 ✅ get有时候真的hen好用耶~比如vue里的双向绑定啥的，就离不开它！😄
get,set简直就是绝配👍
get函数里你Ke以Zuohen多事情，比如日志记录啥的...🤔
set函数geng是Ke以Zuohen多校验工作，比如数据类型的校验...💪‍♂️
get,set就像一对好基友👫，经常一起出现...
 ✅ get
set也是同理哦~👉👈其实proxy里的get,set比defineproperty里的geng加强大，因为它Ke以代理整个对象，而不是单个属性...
 监听属性赋值哈，这个也hen常用耶~比如表单提交啥的，就需要用到它！🤩有时候set函数里还Ke以Zuo些额外的逻辑处理，比如触发视图geng新啥的...🚀还有就是set函数里Ke以Zuo数据校验，确保数据的正确性...🔍当然set函数也Ke以用来Zuo数据转换啥的，比如把字符串转成数字啥的...🔄
set函数非常灵活，Ke以根据需要Zuohen多事情...
 ✅ set有时候set真的hen有用，比如在vue里双向绑定就离不开它！😁当然set函数里也Ke以Zuohen多其他的事情，比如日志记录啥的...📝或者触发一些副作用啥的...🤯
set函数非常有用👍‍♂️而且set函数还Ke以用来Zuo数据同步啥的，比如把数据同步到本地存储啥的...💾当然set函数也Ke以用来触发一些异步操作啥的，比如请求后端接口啥的...🌐
set函数的用途非常广泛...
 ✅ set
get也是同理哈~其实proxy里的set,get比defineproperty里的geng灵活，因为它Ke以动态地拦截对象的操作...
 监听属性删除delete真是个狠角色啊！😈有时候我们确实需要删除一些属性啥的，比如清除缓存啥的...🗑️不过delete操作也要慎用，因为它可Neng会导致一些意想不到的问题...🤔比如删除了一个不存在的属性啥的...😳或者删除了一个正在被使用的属性啥的...🚨
delete操作要谨慎使用...
 ❌没法直接Zuo到哦~不过Ke以通过其他方式间接实现，比如重写delete操作符啥的...🤔不过这样Zuo可Neng会比较复杂，而且可Neng会有一些副作用...🤯所以一般还是不用这么干的好👎‍♂️当然Ru果你真的需要这么Zuo的话，也Ke以考虑使用proxy来实现...👍‍♂️因为proxy里有deleteproperty这个拦截器，Ke以用来拦截delete操作...
 ✅ deleteProperty
deleterow也行哦~其实proxy里的deleteproperty非常有用，Ke以用来拦截delete操作，确保数据的安全性...🔒当然你也Ke以在deleteproperty里Zuo一些额外的逻辑处理，比如日志记录啥的...📝或者触发一些副作用啥的...🤯
deleteproperty非常灵活，Ke以根据需要Zuohen多事情...
 Zui后一下吧，两者各有千秋，根据实际需求选择合适的工具才是Zui重要的，你说呢？😊就像一把钥匙开一把锁一样，对症下药才是正解嘛！💡所以说在实际开发中，还是要根据具体情况来选择使用 Object.defineProperty  还是  Proxy Code>. Ru果不需要兼容IE，并且需要geng强大的功Neng，那么 Proxy Code>. 就是geng好的选择，反之则Ke以使用. 来实现简单的属性监听功Neng。
两者dou是非常有用的工具，Ke以根据实际情况灵活运用。😊. 说实话，这两个东西学起来还是有点费劲，但是一旦掌握了就会觉得非常好用。加油吧少年们～ 💪 & zwj； ♂️/P>. 
. Vue3 选择 Proxy 是因为它Nenggeng好地处理动态属性、数组等复杂场景，代码geng简洁。Ru果不需要兼容IE，Proxy是geng好的选择。其实不仅仅是Vue，其他框架或者库也在使用Proxy来实现数据的响应式。可见Proxy是一个非常强大的工具。 😎. 而且随着现代浏览器的普及，Proxy 的兼容性问题也会越来越小。所以说Proxy 是一个非常值得学习的技术点。 👍 & zwj; ♂️/P>.