当前位置: 首页 > article >正文

vue里面的 Object.defineProperty 和 Proxy使用优势

首先看 Object.defineProperty

   let m = {
            a: 1,
            b: 2,
            arr: [1, 2, 3]
        }
        let o = {}
        Object.keys(m).forEach((x) => {
            Object.defineProperty(o, x, {
                get() {
                    return m[x]
                },
                set() {
                    return m[x]

                }
            })
        })
        console.log('22', o);

下图打印的结果

a, arr, b 都是有get 和 set方法的,但是数组里面的属性是没有 set 和 get方法的
也就是修改了数组里面的数据,不会 触发set 和 get 方法的

利用递归也是可以修改数据里面的数据,来 触发set 和 get 方法的

之前的作者大大为什么不这样做呢,有 for 循环 需要遍历递归,但是如果对象的属性很多的话,这样的遍历递归是很消耗性能的

在这里插入图片描述

new Proxy

        let m = {
            a: 1,
            b: 2,
            arr: [1, 2, 3]
        }
        let o = new Proxy(m, {
            get(target, key) {
                return target[key];
            },
            set() {

            }
        })
        console.log('oo', o);

Proxy 它也是修改了数组里面的数据,不会 触发set 和 get 方法的
但是它只要递归一次就可以实现我们想要的了。

总结

在这里插入图片描述


http://www.kler.cn/a/3073.html

相关文章:

  • 【AR技术】AR教学机器人
  • 【Python语言基础】——Python 字典方法
  • 用Node.js实现一个HTTP服务器程序(文件服务器)
  • 【K哥爬虫普法】大众点评VS百度地图,论“数据权属”对爬虫开发的罪与罚!
  • JQuery
  • ESP32设备驱动-HDC1080温度湿度传感器驱动
  • 【Pytorch】利用PyTorch实现图像识别
  • 标准I/O
  • 用Pytorch搭建一个房价预测模型
  • 关于学习的一些网站(自用)
  • 【C++】内联函数inline
  • 数据结构与算法——堆的基本存储
  • 电路设计的一些概念
  • 华为OD机试题,用 Java 解【卡片组成的最大数字】问题 | 含解题说明
  • 8个你一看就觉得很棒的Vue开发技巧
  • Liunx下的进程程序替换
  • GitHub Actions工作流搭建
  • jmeter 响应时间rt很小,但是tps也很小jmeter,脚本处理,千万不要用js
  • SpringBoot实战(十三)集成 Admin
  • 技术分享——Java8新特性