admin管理员组

文章数量:1558098

(1).Proxy

1.与defineProperty区别

与defineProperty的区别是缺少了key这个参数，也就是说它是对与某一个key的

proxy得兼容性比较差

defineProperty只要遇到对象就会劫持，proxy则是只会代理第一层

2.proxy得基础使用

new Proxy(obj,{
    get(){},
    set(){}
})
person.name ="xx" 这样并不会响应get set

let proxyPerson = new Proxy(obj,{
    get(){},
    set(){}
})
proxyPerson.name="xx"这样就可以
所以说proxy只能监听代理后的对象

3.get与set中得参数

而proxy中的get/set中有两个参数则可以获取对象中具体的key对应的值
get(target,key){} target 代理前的对象  具体取得属性key

这样使用
get(target,key){
    return target[key]
}
set(target,key,value){
    target[key] = value
}

4.与Reflect结合

如果设置了writerble为false则上面得方法无效了

get(target,key){
    return Reflect.get(target,key)
}
set(target,key,value){
    return Reflect.set(target,key,value)//成功返回true
}

 

(2).vue3遇到对象后的原理

1.代码

const handler = {
    get(target,key){
    if(typeof(target[key]) === 'object' && typeof(target[key] !== null){
        return new Proxy(target[key],handler)
    }
    return Reflect.get(target,key)
}
}
const proxyPerson = new Proxy(person,handler);这样就会反复代理

2.取值时代理

在获得对象中得对象时，这时就会再去代理一次

proxyPerson.wife.name ='zza'; 走一遍get 再走一遍set
proxyPerson.wife.name 走两遍get

只有访问wife的时候才会代理

(3).vue3遇到数组后的原理

1.响应流程解析

proxyPerson.hobbies.push('11');会输出三次取值 两次设值

第一次取值代理 第二次取push 第三次取length

第一次设置target,key,value 第二次设置长度4(但是没意义,数组长度已经变为4了）

2.无意义set可以取消

源码中通过oldValue来保存旧的值，通过条件判断来去除修改操作

set(target,key,value){
    let oldValue = target[key];//第二次等于4 因为key为length
    if(!oldValue){
        console.log('xz')
    }else if(value !==oldValue){ //4!=4 不执行修改
        console.log('xg')
    }
    return Reflect.set(target,key,value)//成功返回true
}

 

两次设值

情况1 第一次获取原始数组[下标] 为空则输出新增操作 第二次操作没输出了

情况2 第一次获取原始数组[下标] 有值继续判断新增值 是否等于原始数组[下标] 不等于输出修改操作 第二次执行同上

3.总结区别

目前来说vue3就是比vue2

1.能响应数组的更新渲染视图

2.一上来不会全部代理对象，所以性能提升

本文标签： vueproxy

版权声明：本文标题：Vue深入-2【VUE3使用proxy】 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727372372a1111335.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。