vue2和vue3的区别，那些你不知道的细节

百度一下，你会发现很多博客文章都写了vue2和vue3的区别，问哪一个前端他都会告诉你：2是用defineProperty，而3是用Proxy啦，笨蛋。

当你用这个回答面试官的时候，面试官会不会问：能谈一下defineProperty和Proxy的区别嘛？

如果你没有准备，当遇到这个问题，恭喜，您凉了

那么，这个问题怎么解答呢？

首先,悟空，你看

new Proxy( data, {get(key) {}, set(key, value) {},})
Object.defineProperty(data, 'count', {get() {}, set() {},})

变换一下：

new Proxy( object, function)
Object.defineProperty(object, object.key,function)

很明显，Object.defineProperty的参数是比Proxy的参数多的。为什么呢？

这就可以得出一个结论：

Object.defineProperty监听对象属性。而Proxy监听的是整个对象

这个结论你可以在任何一篇讲vue2和3区别的文章里找到。结合上面的变换，应该是可以懂了。

为了避免有钻牛角尖的，还是讲一下我的理解把

八戒，你再看

Object.defineProperty的三个参数是（监听对象，监听对象的某一个值，函数）

所以这就导致了一个vue2的问题，那就是我想给对象obj加个newName属性，可是我监听obj对象在前，而监听obj对象的时候，obj是没有newName属性的。而人类没有预见未来的能力，也不知道将来会给obj加什么参数。所以Object.defineProperty内的参数就只有两个一个是obj，一个是function。所以vue2监听不到你新增的obj的新属性。所以vue2会有 $set

Proxy的两个参数是（监听对象，函数）

Proxy就完美解决了这个无法监听对象新值的问题。因为他不用知道对象具体的key。他是直接监听一个对象的。这也是他只需要两个参数的原因。所以有人讲：Proxy是从更高维度监听拦截对象的。相对的，在vue3内，没有 $set,因为不需要。

讲到这，大家应该都能明白了。但是vue3比vue2好，不仅仅只因为这点。优化了太多了。有时间讲讲我知道的优化点。