Vue数据代理defineProperty方法

最新推荐文章于 2023-11-23 22:40:25 发布

y17757773039

最新推荐文章于 2023-11-23 22:40:25 发布

阅读量545

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/y17757773039/article/details/127489267

版权

1、Object.defineProperty()
前言：在了解数据代理前，先了解Object.defineProperty()方法
参数：Object.defineProperty(obj, prop, descriptor）
obj：要定义的对象（谁代理，代理者）
prop：要修改，添加的属性（代理什么，代理数据）
descriptor：属性描述（控制属性是否可以被操作，以及getter和setter方法）

<body>
    <div id="app"></div>
    <script>
        let number=0
        let person={
            name:'张三',
            sex:'男',
        }
        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true,//控制属性是否可以枚举，默认false
            // writable:true,//控制属性是否可以被修改，默认false
            // configurable:true//控制属性是否可以被删除，默认false
        
            //当有人读取person的age属性时，调用get()函数或者叫getter,返回age值
            get:function(){
                return 'hello'
            },

            //当有人修改person的age属性时，调用set()函数或者叫setter,返回age值
            set:function(value){
                console.log('有人修改age的value');
                number=value;
            }
        })
        
        // console.log(Object.keys(person));

        // for(key in person){
        //     console.log('@',person[key]);
        // }
        
    </script>
</body>

2、数据代理
前言：简单的数据代理
效果：用obj2代理obj的x值，控制台令obj2.x=3，此时obj2的代理属性x值被修改，触发setter，obj的x值也改。

<body>
    <div id="app"></div>
    <script>
        //用obj2 代理 obj里的x值
        let obj={x:100}
        let obj2={y:200}
        
        //obj2中新增x属性，获取值为obj.x
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            //修改时触发，修改obj值
            set(value){
                obj.x=value
            }
        })
    </script>
</body>

3、Vue中数据代理
说明:建立一个vue实例，名为vm，vm代理data属性，因此可以直接在控制台输入比如vm.name，vm会用getter方法输出data里的name值。
代理方法：用Object.defineProperty()方法在vm中添加（代理）data属性，写好相关getter，setter方法。

<body>
    <div id="app">
        <div>学校名字：{{name}}</div>
        <div>学校地址：{{address}}</div>
    </div>

    <script>
        //控制台查找修改data的两种方法
        //方法1
        //vm._data.name
        //原理：data数据都劫持在VUE自带的_data属性中，可以直接在里面查找

        //方法2
        //vm.name
        //原理：因为vm代理了data，使用definepropery添加了这些属性，definepropery中有getter等方法
        //所以vm.name或者vm.name=1,会使用getter，setter方法间接操作data中的值

        //代理作用：{{_data.name}}和{{name}}同理，一个直接读，一个用getter读，而后者更简洁
        //关于VUE中的_data：vue实时监听_data中的data，一旦name改变，{{name}}改变
        //_data是用了个小方法添加了额外属性的data
        const vm=new Vue({
            el: '#app',
            data:{
                name: 'ycb',
                address:'温商'
            }
        })
    </script>
</body>