Vue中的数据代理

Vue中的数据代理是什么？

首先什么是数据代理？

let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
	obj.x = value
	}
})
1
2
3
4
5
6
7
8
9
10
11

Obj2中没有属性x,而Obj对象中有属性x,但是可以通过操作obj2来获取到x的值以及改变x的值，这是不是很神奇呢？这一切的功劳都是因为使用了Object.defineProperty这个API下的getter和setter这俩个方法。这便是数据代理

Vue 中是如何实现数据代理的呢？

<body>
	<!-- 准备好一个容器-->
	<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这段代码相信大家并不陌生，这就是最简单的vue的一个入门模板，但是这里存在数据代理，且听博主慢慢道来。。。当你完成以上代码时，vue都经历了哪些呢？

经历的过程：

用户将数据写到Vue配置项options下data中。
Vue将data中的数据进行数据劫持，将其拷贝至Vue对象实例下的_data下
此时vm没有name.adddress这些属性，要想在模板中使用他们，只能通过 __data.name或__data.address来获取
Vue为_data中的数据做数据代理，在vm实例下添加name,address属性。当有人获取name/address值时，调用getter

方法，获取_data中的name数据，当有人修改name/address中的数据时，调用setter方法，获取修改的值并重新复制给_data中的数据
此时，vm实例有name/address属性，可以直接使用vm.name，而不需要使用_data.name.

这便是Vue中的数据代理…

相关阅读:
Python Flask flasgger api文档[python/flask/flasgger]
优雅迷人的小程序 UI 风格
第四章文件管理七、文件共享
足球大数据预测胜平负、走地之人工智能算法现状与改进措施
2024年1月京东洗衣机行业数据分析：TOP10品牌销量销额排行榜
在智能家居领域产品中常用芯片
【不限框架】超好用的3d开源图片预览插件推荐
第六十二 CSP的常见问题 - CSP进程是否消耗许可证？,我如何编译CSP页面
SpringMVC之JSR303和拦截器
C. Friends and Gifts

原文地址：https://blog.csdn.net/weixin_63228975/article/details/127683754