19.vue渲染系统的实现

实现一个简洁版的Mini-vue框架,包含三个模块:
渲染系统模块(runtime->vnode–>真实DOM)
可响应式系统模块( reactive)
应用程序入口模块(createApp(App).mount(“#app”))

渲染系统的实现

渲染系统主要实现三个功能:
(1) h函数,用于返回一个VNode对象;
(2) mount函数,用于将VNode挂载到DOM上;
(3) patch函数,用于将两个VNode进行对比,决定如何处理新的VNode.

index.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		<script src="./renderer.js"></script>
		<script> 
			//通过h函数创建vnode
			const vnode= h("div" ,{class :"info"},[
				h("h2",null,"hello html")
			])
			console.log(vnode)
			//通过mount函数,将vnode挂载到div#app上
			mount(vnode,document.querySelector("#app"))
			
			//创建新的vnode
			setTimeout(()=>{
				const vnode1= h("span",{class:"newinfo"},"哈哈哈哈")
				pat

19.vue渲染系统的实现

渲染系统的实现

悦读