【vue】数据代理


Object.defineProperty()方法

我们先来看几段代码
常用添加属性的方法,以添加age举例 ,点击查看代码
let person = {
            name: '张三',
            sex: '男',
            age:18 //直接定义再对象里
        }
     // person.age=18;
      console.log(person);

用Object.defineProperty()方法添加 ,点击查看代码
 Object.defineProperty(person, 'age', {
            value: 18        
        })

MDN文档介绍Object.defineProperty()方法 ,点击查看代码
//Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
//使用这个方法的添加的属性默认不可以被枚举,修改,删除。如果想有这些操作就要更改配置项
        let person = {
            name: '张三',
            sex: '男',
            // age: 18
        }
      
        Object.defineProperty(person, 'age', {
            // value: 18,//该属性对应的值。默认是undefined
            // enumerable: true, //控制属性是否可以枚举,默认值是false
            // writable: true, //控制属性是否可以被修改,默认值是false
            // configurable: true, //控制属性是否可以被删除,默认值是false

            // 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
            get() {
            },

            //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
            set(value) {
            }

        })



//注:如果一个描述符同时拥有 value 或 writable 和 get 或 set 键,则会产生一个异常。

什么是数据代理

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
通过obj2代理对obj中x属性的操作 ,点击查看代码

vue中的数据代理

点击查看代码
    

    

学校名称:{{name}}

学校地址:{{address}}

如果不用数据代理用{{_data.name}}也可以获取到值,但是这么写就比较麻烦,我们想直接通过{{name}}就获取到值,这就是数据绑定的意义

如果您看到最后了,欢迎批评指正!
如果有错误,请帮我指出,感谢!