前端技术分享
0%

【019】Vue全局API学习：Vue.compile

发表于 更新于 分类于

用法

将一个模板字符串编译成 render 函数。只在完整版时可用。

模版代码：

1
Vue.compile('<div>{{ msg }}</div>');

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			var res = Vue.compile('<div>{{ msg }}</div>');
			new Vue({
				el: '#app',
				data: {
					msg: 'hello'
				},
				render: res.render
			})
		</script>
	</body>
</html>

在浏览器中运行代码可以看到页面正常显示hello，在这一过程中，到底经历了什么呢？

compile 的步骤

compile 的内容非常多，大致分为三块主要内容，就是parse，optimize，generate
另外，compile 的作用是解析模板，生成渲染模板的 render

  1. 步骤一：parse
  • 接收 template 原始模板，按照模板的节点 和数据 生成对应的 ast 。
  1. 步骤二：optimize
  • 遍历递归每一个ast节点，标记静态的节点（没有绑定任何动态数据），这样就知道那部分不会变化，于是在页面需要更新时，减少去比对这部分DOM，从而达到性能优化的目的。
  1. 步骤三：generate
  • 把前两步生成完善的 ast 组装成 render 字符串。

因为目前是基础学习，所以这里只作为了解，后期如果有机会再深入。