Vue数据代理深入解析：定义property与代理原理应用-优快云博客

本文链接：https://blog.youkuaiyun.com/boyas/article/details/122245927

数据代理

1.回顾Obejct.defineproperty方法

Obejct.defineproperty()有四个基本的属性配置；

 	<script>
        let person = {
            name:'张三',
            sex:'男'
        }

        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true, // 控制属性是否可以枚举，默认为false
            writable:true, // 控制属性是否可以枚举，默认为false
            configurable:true // 控制属性是否可以枚举，默认为false
        })
        console.log(person);
    </script>

还有两个常用的高级配置项get函数和set函数；

	<script>
        let number = 18
        let person = {
            name:'张三',
            sex:'男'
        }

        Object.defineProperty(person,'age',{
            //当有人读取person的age属性时，get函数(getter)就会被调用,且返回值就是age的值
            get(){
                console.log('有人读取age属性了');
                return number
            },
            //当有人修改person的age属性时，set函数(setter)就会被调用,会收到修改的具体值
            set(value){
                console.log('有人修改了age属性，且值是',value);
                number = value
            }
        })
        console.log(person);
    </script>

在这里插入图片描述

2.数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

	<script>
        let obj = {x:100}
        let obj2 = {y:200}

        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },

            set(value){
                obj.x = value
            }
        })
    </script>

在这里插入图片描述

3.Vue中的数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的数据代理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</body>

<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            name:'赣南师范大学',
            address:'赣州'
        }
    })
</script>
</html>

在这里插入图片描述
由上图可以看出，vm身上有address和name两个属性，都是由Object.defineProperty()方法加上去的。当访问vm上的name时，getter开始工作，把data中的name拿过来给vm.name，当要把data中的name改掉时，setter开始工作，通过修改vm.name把data中的name改掉。