美文网首页
vue3较vue2的特别之处 - 数据响应式

vue3较vue2的特别之处 - 数据响应式

作者: 张中华 | 来源:发表于2022-02-23 09:54 被阅读0次

    vue2使用的是Object.defineProperty, 劫持getter/setter方法, 兼容性好,支持IE9
    可参考:https://www.jianshu.com/p/350d7cbcc1d8

    vue3使用的proxy,功能更加强大,但是兼容性不好



    Proxy是代理对象,代理的意思就是自己不直接执行,而让另外一个对象代替自己去做,有点像生活中的中介。使用代理时,代理对象在执行处理的过程中可能还会额外做一些事情,甚至有可能只做其他事情而不执行原来的业务。
    Proxy只可以作为构造器使用new关键字来创建代理对象,而不可以作为方法来执行,创建Proxy语法如下:

    new Proxy(target, handler);
    

    处理器handler时对象的类型,代理实际执行的逻辑都是通过设置handler的属性方法中完成的,handler可以有14个属性,分别对应14种操作,这14个属性跟Reflect的14个属性完全相同,不过在使用代理的时候我们并不需要将14个属性全部定义出来,根据需要定义。
    代码示例:

    let p = {
        name: 'zzh',
        age: 18,
    }
    let handler = {set: function(obj, key, val) {
        obj[key] = val;
    }};
    var proxy = new Proxy(p, handler);
    proxy.name = 'xiao ming';
    console.log(proxy.name); // xiao ming
    console.log(p.name); // xiao ming
    

    参考地址:
    https://blog.51cto.com/u_15345191/4805626

    相关文章

      网友评论

          本文标题:vue3较vue2的特别之处 - 数据响应式

          本文链接:https://www.haomeiwen.com/subject/ngeglrtx.html