likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 10

百度一下，你会发现很多博客文章都写了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);

结果：

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

> 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'

结果：

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