百度一下，你会发现很多博客文章都写了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好，不仅仅只因为这点。优化了太多了。有时间讲讲我知道的优化点。

结尾附上defineProperty和Proxy实例

从代码长度，和逻辑，就知道3比2好多少了，

此处引用另一位博主的例子，可能是我自己懒得写把。。。，

不想跳转的，例子我搬到了下面

> Object.defineProperty(data, ‘count’, {get() {}, set() {},})

class Observer {constructor(data) {// 遍历参数data的参数，给添加到this上for (let key of Object.keys(data)) {if (typeof data[key] === 'object') {data[key] = new Observer(data[key])}Object.defineProperty(this, key, {enumerable: true,configurable: true,get() {console.log('你访问了' + key);return data[key]},set(newVal) {console.log('你设置了' + key);console.log('新的' + key + '-' + newVal);if (newVal === data[key]) {return}data[key] = newVal}})}}
}

const obj = { name: 'app', age: '18', a: { b: 1, c: 2 } } 
const app = new Observer(obj) 
app.age = 20 
console.log(app.age);
app.newPropKey = '新属性'
console.log(app.newPropKey); 

结果：

> new Proxy( object, function)

const obj = {name: 'krry',age: 24,others: {mobile: 'mi10',watch: 'mi4'}
}
const p = new Proxy(obj, {get(target, key, receiver) {console.log('查看的属性');return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log('设置的属性为：' + key);console.log('新的属性' + key + '值为：' + value);Reflect.set(target, key, value, receiver)}
})
p.age = 22
console.log(p.age);
console.log('--------');
p.single = 'NO'
console.log(p.single);
console.log('--------');
p.others.shoe = 'boost' 

结果：

## 最后 整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。  **有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享**

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取