数据代理-JZTXT

数据代理

<script>
        let zhang3 = {
            name: "法外狂徒-张三",
            gender: '男'
        }

        let num=37

        // 给对象追加一个age属性,值为18
        Object.defineProperty(zhang3, 'age', {
            get(){  //当有人读取zhang3的age属性时调用此get()函数
                return num  //返回值就是age的值. 
            },
            set(val){ //当有人修改zhang3的age属性时调用此set()函数
                num=val
            },
            // value: 18,         //值
            // enumerable: true,  //可以枚举  默认为: false
            // writable: true,     //可被修改  默认为: false
            // configurable: true  //可被删除  默认为: false
        })

        console.log(zhang3.age);
        zhang3.age=100
        console.log(num);

    </script>

vue中的数据代理:

将用户配置在data中的数据.通过一次赋值交给 vm._data,
通过defineProperty() 给vm上添加属性'name',
- vm.name的getter里把vm.data.name返回
- 通过vm.name='xxx' 设置值时, 进行 vm._data.name='xxx'赋值

数据代理目的: 为了让写在模板里的代码更简洁.

<body>
<div id="app">
    {{name}},{{age}}
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            name: 'Yancy',
            age: 37
        }
    })
</script>
</body>