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中的数据代理…

相关阅读:
go数组后添加元素
遥测终端赋能水库泄洪监测预警，筑牢度汛安全防线！
哈工大李治军老师操作系统笔记【7】：多进程图像（Learning OS Concepts By Coding Them !）
doubbo 容错、负载均衡、降级
【大模型】更强的开源可商用的中英文大语言模型baichuan2来了，从零开始搭建
NetCore IIS Redis JMeter 登录压力测试
图像分割笔记(二): 使用YOLOv5-Seg对图像进行分割检测完整版（从自定义数据集到测试验证的完整流程））
[C++]IO流
Vue中如何进行数据可视化雷达图展示
21天学会C++：Day13----动态内存管理

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