vue中的数据代理,何为数据代理?

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)

<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,x,{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>

vue中的数据代理

1.Vue中的数据代理:

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

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

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

3.基本原理:

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性,都指定一个getter/setter。

<!-- 准备好一个容器-->
		<div id="root">
			<h2>名称:{
         
  {name}}</h2>
			<h2>地址:{
         
  {address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:#root,
			data:{
				name:自然萌,
				address:北京
			}
		})
	</script>

在getter/setter内部去操作(读/写)data中对应的属性。

经验分享 程序员 微信小程序 职场和发展