Vue 07 Vue中的数据代理

通过数据代理，我可以方便的使用vm.属性，修改data中的属性

什么是数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
我们修改obj2的x属性，其实修改的是obj的x属性

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理title>
	head>
	<body>
		
		<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>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Vue中的数据代理

1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<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>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

相关阅读:
【21天学习挑战赛】冒泡排序
注意力机制QKV在GAT（Graph Attention Network）的体现
c# xml 参数读取的复杂使用
Python Pandas数据处理作图——霍尔效应
Github 注册
gcc: binutil: gprof，程序执行后函数调用栈及占比统计
Mac修改Mysql8.0密码
API接口测试-postman用例集/环境导入及导出方案
货币银行学简答论述题
Koordinator 1.0 正式发布：业界首个生产可用、面向规模场景的开源混部系统

原文地址：https://blog.csdn.net/Rockandrollman/article/details/133244961