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

最新推荐文章于 2024-09-20 17:24:27 发布

龙马啊

最新推荐文章于 2024-09-20 17:24:27 发布

阅读量422

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43853213/article/details/129759383

版权

文章探讨了Object.defineProperty和Proxy在处理对象属性时的get和set方法。使用Object.defineProperty为对象属性添加get和set时，数组内部的属性不受影响。而Proxy虽然同样不直接作用于数组元素，但可以通过一次递归实现对深层数据的拦截。文章提到了性能问题，递归遍历大量属性可能消耗性能，而Proxy在处理复杂结构时更高效。

摘要由CSDN通过智能技术生成

首先看 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);