006理解数据代理

理解数据代理

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

<script>
	let obj = {x:100}
    let obj2 = {y:200}
    Object.defineProperty(obj2,'x'),{
        get(){
            return obj.x
        },
        ser(value){
            obj.x = value
        }
    }
</script>

Vue中的数据代理

<div id="root">
    <h1>
        schoolName:{{name}}
    </h1>
    <h1>
        schoolAddress:{{address}}
    </h1>
</div>

<script>
	Vue.config.produntionTip = false
    
    const vm = new Vue({
        el:'#root',
        data:{
            name:'shangguigu',
            address:'beijing'
        }
    })
</script>

通过vm读写name/address用getter、setter读写data中的数据

在vm中vm._data存储了data中的数据，这里用了数据劫持

一旦data中的数据发生更改，vue会监测到，页面中的数据将会自动更新

总结

• 通过vm对象来代理data对象中的属性的操作
• 更加方便的操作data中的数据
  334)]

总结

• 通过vm对象来代理data对象中的属性的操作
• 更加方便的操作data中的数据
• 通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性都指定一个getter和setter，在setter和getter内部去操作data中的对应的属性