Vue - 响应式模拟 - Vue3.x

南门酒巷

已于 2024-04-10 22:00:44 修改

阅读量188

点赞数 10

分类专栏：前端框架之Vue 文章标签： vue.js javascript 前端

于 2024-04-08 17:08:22 首次发布

本文链接：https://blog.csdn.net/weixin_46685715/article/details/137516081

版权

前端框架之Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

模拟 Vue3.x 的响应式系统

Vue 3.x 使用了观察者模式。在Vue中，每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据property记录为依赖。之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。

Vue 3.x 在观察者模式的应用上进行了一些优化。与Vue 2.x相比，Vue 3.x 默认进行懒观察，即只会对“被用于渲染初始可见部分的数据”创建观察者，而且Vue 3.x的观察者更高效。这种优化可以提高页面性能，只更新变化的部分，实现最大化的复用。

下面通过原生HTML+JavaScript模仿Vue 3.x的响应式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Reactive System</title>
</head>
<body>
<div id="app">
	<label for="inputField">输入：</label>
	<input type="text" id="inputField" />
	<p id="message">消息：{{ message }}</p>
</div>
</body>
</html>

// 创建一个响应式对象
function createReactiveObject (obj) {
	return new Proxy(obj, {
		get (target, key, receiver) {
			// 收集依赖（这里简化处理，实际Vue中会更复杂）
			// console.log(`Getting ${ key }`);
			return Reflect.get(target, key, receiver);
		},
		
		set (target, key, value, receiver) {
			// console.log(`Setting ${ key } to ${ value }`);
			Reflect.set(target, key, value, receiver);
			// 触发更新（这里简化处理，实际Vue中会更复杂）
			updateDOM();
			return true;
		}
	});
}

// 初始数据
const data = {
	message: '初始消息'
};

// 创建响应式对象
const reactiveData = createReactiveObject(data);

// 绑定输入字段的更改事件
const inputField = document.getElementById('inputField');
inputField.addEventListener('input', function () {
	reactiveData.message = inputField.value;
});

// 初始渲染
function render () {
	document.getElementById('message').textContent = `消息：${ reactiveData.message }`;
}

// 更新DOM的函数
function updateDOM () {
	render();
}

// 初始渲染
render();