Vue 2.x – 回顾Object.defineproperty()方法

Object.defineproperty方法

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，其添加的属性在一般情况下不能被枚举，删除，修改

用法：

Object.defineProperty(obj, prop, desc)

<script>
        let person = {
            name: "张三",
            sex: "男",
            age: 18
        }
        console.log("person", Object.keys(person));
        console.log("person", person);

        let person2 = {
            name: "张三",
            sex: "男"
        }

        Object.defineProperty(person2, 'age', {
            value: 18
        })

        console.log("person2", Object.keys(person2));
        console.log("person2", person2);
    </script>

当然，在特定情况下，是可以删除，枚举，修改的

Object.defineProperty(person2, 'age', {
            value: 18,
            enumerable: true, // 控制属性是否可以枚举
            writable:true, // 控制属性是否可以被修改
            configurable:true, // 控制属性是否可以被删除
        })

 getter/setter用法

<script>
        let number = 18;
        let person2 = {
            name: "张三",
            sex: "男"
        }

        Object.defineProperty(person2, 'age', {
            // 当有人读取person的age是，get函数(getter)就会被调用
            get() {
                console.log("有人读取age属性了");
                return number
            },

            // 当有人修改person的age是，set函数(setter)就会被调用，且会收到修改值
            set(value) {
                console.log("有人修改了age值，修改内容为：", value);
                number = value
            }
        })
    </script>

更多资料深入浅出Object.defineProperty()