Vue中的数据代理

118 阅读1分钟

1.Vue中的数据代理:

		通过vm对象来代理data对象中属性的操作(读/写)

2.Vue中数据代理的好处:

		更加方便的操作data中的数据

3.基本原理:

		通过Object.defineProperty()把data对象中所有属性添加到vm上。
		为每一个添加到vm上的属性,都指定一个getter/setter。
		在getter/setter内部去操作(读/写)data中对应的属性。
<body>
    <script>
        let number=18
        let person={
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',
        {
            get:function(){
                return number
            },
            set(value){
                console.log('有人修改')
                number=value
                
            }
        })
        console.log(person)
    </script>
</body>

image.png

image.png