7.Vue数据代理演示

修罗_

已于 2022-02-16 11:58:38 修改

阅读量136

点赞数

分类专栏： VUE 文章标签： typescript javascript 前端

于 2022-02-14 17:46:14 首次发布

本文链接：https://blog.csdn.net/weixin_45843676/article/details/122929289

版权

VUE 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

<script>
	let obj1 = {
		x: 100
	};
	let obj2 = {
		y: 200
	};
	Object.defineProperty(obj2, 'x', {
		//给obj2添加属性x
		//当有人访问obj2.x时返回obj1.x
		get() {
			return obj1.x;
		},
		//当有人修改值obj2.x时同时赋值给obj1.x
		set(value) {
			obj1.x = value;
		}
	})
</script>