面试题搜集

2019-04-22  本文已影响0人  别过经年

1. vue3 使用proxy解决了什么问题?

vue3.0 尝鲜 -- 摒弃 Object.defineProperty,基于 Proxy 的观察者机制探索
面试官: 实现双向绑定Proxy比defineproperty优劣如何?
使用新特性实现一个简单的MVVM(2)--深入数据响应

proxy并不能深度代理属性,也就是深层次属性赋值,并不能触发set函数,看阮大神的回复

阮一峰的回复

ECMAScript 6 入门

也可以从另一方面理解,【面试篇】寒冬求职季之你必须要懂的原生JS(中) 我们可以看到 Proxy 会劫持整个对象,读取对象中的属性或者是修改属性值,那么就会被劫持。但是有点需要注意,复杂数据类型,监控的是引用地址,而不是值,如果引用地址没有改变,那么不会触发set。

let obj = {name: 'Yvette', hobbits: ['travel', 'reading'], info: {
    age: 20,
    job: 'engineer'
}};
let p = new Proxy(obj, {
    get(target, key) { //第三个参数是 proxy, 一般不使用
        console.log('读取成功');
        return Reflect.get(target, key);
    },
    set(target, key, value) {
        if(key === 'length') return true; //如果是数组长度的变化,返回。
        console.log('设置成功');
        return Reflect.set([target, key, value]);
    }
});
p.name = 20; //设置成功
p.age = 20; //设置成功; 不需要事先定义此属性
p.hobbits.push('photography'); //读取成功;注意不会触发设置成功
p.info.age = 18; //读取成功;不会触发设置成功

对于深层次引用类型的数据需要层层代理,这样才能其对应的set函数,proxy是代理在对象级别的,不需要为每个属性设置代理,而Object.defineProperty 是需要遍历对象的每个属性设置代理

上一篇下一篇

猜你喜欢

热点阅读