Vue中的数据代理

最新推荐文章于 2022-11-30 15:13:36 发布

李公子丶

最新推荐文章于 2022-11-30 15:13:36 发布

阅读量3.6k

点赞数 5

分类专栏： Vue2学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_54527592/article/details/119107002

版权

Vue2学习笔记专栏收录该内容

48 篇文章 16 订阅

订阅专栏

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

下面我们通过一个简单的例子来了解什么是数据代理

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

Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
			obj.x = value
	}
})

我们定义了两个对象 obj 和 obj2

然后通过Object.defineProperty() 方法给obj2的对象上面添加了一个属性 x 在配置对象中我们定义了get() 方法和 set() 方法

当我们访问obj2的x属性时触发get() 方法把obj.x的值返回给我们

当我们修改obj2.x的值时候触发了set() 方法把我们修改的值拿到并赋值给了obj.x

现在就实现了最简单的数据代理不管我们如何操作obj2.x的值它都会始终和obj.x的值保持一致

在我们知道了什么是数据代理之后我们来看看Vue中是如何实现数据代理的

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>
		<!-- 引入Vue -->
		<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>

我们通过new Vue() 得到了一个 vm 实例对象接下来我们打印 vm 实例对象

在实例对象中出现了 name 和 address 两个属性

鼠标放上去会提示 Invoke property getter

在实例的最下面还有着两个属性的 set和get 方法

现在我们得知这两个属性是由Object.defineProperty()添加上去的

所以当我们通过vm读name的时候实际读的就是data中的name 当我们改的时候改的也是data中的name

李公子丶

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
8
评论
Vue中的数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）下面我们通过一个简单的例子来了解什么是数据代理let obj = {x:100}let obj2 = {y:200}Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x = value }})我们定义了两个对象 obj 和 obj2然后通过Object.defineProperty() 方法给obj2的对象上面添
复制链接

扫一扫