vue的渲染器的实现

最新推荐文章于 2024-01-29 16:22:44 发布

裴嘉靖

最新推荐文章于 2024-01-29 16:22:44 发布

阅读量146

点赞数

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

本文链接：https://blog.csdn.net/peijiajing/article/details/129688495

版权

Vue 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

28 篇文章 0 订阅

订阅专栏

该文章演示了如何使用JavaScript实现虚拟DOM的核心功能，包括创建虚拟节点(h函数)，将虚拟节点挂载到实际DOM(mount函数)，以及更新DOM树的patch算法。通过这些函数，可以高效地对比和更新DOM结构，优化Web应用性能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>

	<body>
		<div id="app">
		</div>
		<script src="js/renderer.js"></script>
		<script>
			/* 1.通过h函数创建vnode */
			const vnode = h('div', {calss: 'pei',id:'aaa'}, [
				h('h2', null, '当前计数：100'),
				h('button', null, '+1')
			])

			/* 2.通过mount函数，将vnode挂载到div#app上 */

			mount(vnode, document.querySelector("#app"))
			
			/* 3、创建一个新的vnode */
			// const vnode1 = h('h2', {calss: 'peijj',id:'bbb'},"哈哈哈")
			const vnode1 = h('h2', {calss: 'peijj',id:'bbb'},[
				h('h2', null, '呵呵呵'),
				h('button',{onclick:function(){}}, '11')
			])
			
			patch(vnode,vnode1)
		</script>
	</body>
</html>

// vnode=>javascript对象=>{}
const h = (tag, props, children) => {
	return {
		tag,
		props,
		children
	}
}

const mount = (vnode, container) => {
	//1、创建出真是的原生，并且在vnode上保留el;
	const el = vnode.el = document.createElement(vnode.tag);

	//2、处理props
	if (vnode.props) {
		for (const key in vnode.props) {
			const value = vnode.props[key];
			if (key.startsWith("on")) {
				//对事件监听的判断
				el.addEventListener(key.slice(2).toLowerCase(), value)
			} else {
				el.setAttribute(key, value)
			}
		}
	}

	//3、处理children
	if (vnode.children) {
		if (typeof vnode.children === 'string') {
			el.textContent = vnode.children;
		} else {
			vnode.children.forEach(item => {
				mount(item, el)
			})
		}
	}

	//4、将el挂载到container
	container.appendChild(el)
}

const patch = (n1, n2) => {
	if (n1.tag !== n2.tag) {
		const n1ElParent = n1.el.parentElement;
		n1ElParent.removeChild(n1.el);
		mount(n2, n1ElParent)
	} else {
		//1、取出element对象，并且在n2中进行保存
		const el = n2.el = n1.el;
		// debugger;

		//2、处理props
		const oldProps = n1.props || {};
		const newProps = n2.props || {};
		//2.1获取所有的newProes添加到el;
		for (let key in newProps) {
			const oldValue = oldProps[key];
			const newValue = newProps[key];
			if (newProps !== oldValue) {
				if (key.startsWith("on")) {
					//对事件监听的判断
					const value = newProps[key];
					el.addEventListener(key.slice(2).toLowerCase(), value);
				} else {
					el.setAttribute(key, value);
				}
			}
		}

		//2.2删除旧的props;
		for (let key in oldProps) {
			if (!(key in newProps)) {
				if (key.startsWith("on")) {
					//对事件监听的判断
					const value = oldProps[key];
					el.removeEventListener(key.slice(2).toLowerCase(), value)
				} else {
					el.removeAttribute(key)
				}
			}
		}

		// 3、处理children
		const oldChildren = n1.children || [];
		const newChildren = n2.children || [];
		if (typeof newChildren === 'string') { //情况一：newChildren本身就是一个string
			// 边界判断（edge case）
			if (typeof oldChildren === 'string') {
				if (newChildren !== oldChildren) {
					el.textContent = newChildren;
				}
			} else {
				el.innerHTML = newChildren;
			}
		} else { //情况二：newChildren本身是一个数组
			if (typeof oldChildren === 'string') {
				el.innerHTML = '';
				newChildren.forEach(item => {
					mount(item, el)
				})
			} else {
				//oldChildren :[v1,v2,v3]
				//newChildren :[v1,v5,v6,v8,v9]
				// 1、前面有相同节点的原生进行patch操作
				const commonLength = Math.min(oldChildren.length, newChildren.length);
				for (let i = 0; i < commonLength; i++) {
					patch(oldChildren[i], newChildren[i])
				}

				// 2、newChildren>oldChildren
				if (newChildren.length > oldChildren.length) {
					newChildren.slice(oldChildren.length).forEach(item => {
						mount(item, el)
					})
				}

				// 3、newChildren<oldChildren
				if (newChildren.length < oldChildren.length) {
					oldChildren.slice(newChildren.length).forEach(item => {
						el.removeChild(item.el)
					})
				}
			}
		}


	}
}