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

相关阅读:
openMVS
27服务-安全访问状态转换
云安虚拟化应用性能监测系统—应用异常检测
【开源微服务项目】论如何在微服务中优雅的实现Redis序列化配置
Centos7把home目录下多余的空间转移到/根目录下
mac安装应用提示已损坏的解决方法
轨道交通上的安科瑞精密配电多回路监控装置
1809_ChibiOS的RT内核介绍
GD32F4系列外部晶振启动异常问题解析
Structures

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