26.模仿Vue数据监视

最新推荐文章于 2024-10-16 18:35:07 发布

修罗_

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量90

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

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

版权

JavaScript 数据监听 Vue 响应式 Observer

关键词由CSDN通过智能技术生成

VUE 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

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

<script type="text/javascript">
	let data = {
		name: 'hi'
	};
	//错误用例
	// Object.defineProperty(data, 'name', {
	// 	get() {
	// 		return data.name;
	// 	},
	// 	set(val) {
	// 		data.name = val;
	// 	}
	// });

	//正确用例
	//创建一个监视的实例对象，用于监视data中属性的变化;
	const obs = new Observer(data);
	console.log(obs);
	let vm = {};//模拟一个VUe对象
	vm._data = data = obs;//将obs赋值给Vue和data
	//
	function Observer(obj) {
		const keys = Object.keys(obj);
		keys.forEach((k) => {//遍历对象的每一项
			Object.defineProperty(this, k, {
				get() {
					return obj[k];//返回对象中对应键值的一项
				},
				set(value) {
					console.log(this);//this指向obs
					console.log(`${k}被改了，我要去解析模板，生成虚拟DOM。。。。。。我要开始忙了。`)
					obj[k] = value;//改变对象中对应键值的一项
				}
			})
		})
	}
</script>