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

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

article 2025/3/15 11:19:37

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