一、vue模板渲染原理

最新推荐文章于 2024-07-28 09:45:08 发布

赤简

最新推荐文章于 2024-07-28 09:45:08 发布

阅读量1.2k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/zjingru/article/details/108879588

版权

前端开发专栏收录该内容

17 篇文章 3 订阅

订阅专栏

vue基础Dom 最后页面在浏览器里显示的是张三

这个过程使用的模板渲染

<body>
	<div id="root">
		<p>{{name}}</p>
	</div>
	<script>
		var app = new Vue({
			el:'#root',
			data:{
				name:'张三'
			}
		})
	</script>
</body>

下面根据vue模板渲染的原理用js简单实现

vue模板渲染时的执行流程

获得模板此时模板带有坑>指上文的{{name}}
利用vue构造函数里的数据来填坑 > 指app里提供的data数据最后生成可以在页面显示的‘标签’
将最后生成的标签替换到原来带有坑的标签

<body>
	<div id="root">
		<p>{{name}}</p>
		<p>{{age}}</p>
	</div>
	<script>
		// 1.获得模板
		var tmpNode = document.getElementById('root');
		// 2.提供数据
		let data = {
			name:'李四',
			age:22
		}
		// 3.将数据放进模板中 方式：递归 算法
		function compiler(template,data){
			let childNodes = template.childNodes; //获取子元素
			for(let i = 0;i<childNodes.length;i++){
				let type = childNodes[i].nodeType; // 1 代表元素 3 文本节点
				if(type == 3){
					// 3文本节点 判断里面是否有{{}}插值
					let tex = childNodes[i].nodeValue; // 该属性只有文本节点才有意义
					//判断有没有 {{}}
					tex = tex.replace(brackets,function(_,g){
						let key = g.trim(); //写在花括号里的内容
						let value = data[key];
						//将花括号里的值 用这个值替换
						return value
					})
					childNodes[i].nodeValue = tex
				}else if(type == 1){
					//1.代表元素，进行递归
					compiler(childNodes[i],data)
				}
			}
		}
		//括号的正则表达式
		 let brackets = /\{\{(.+?)\}\}/g;
		 // 利用模板生成一个需要被渲染的html标签 .cloneNode(true)深拷贝
		 let generateNode = tmpNode.cloneNode(true) 
		 compiler(generateNode,data)
		 //4.将渲染好的html放到页面当中 模板被保留
		 root.parentNode.replaceChild(generateNode,root)
	</script>
</body>