1.什么是模板引擎？
在学习vue的源码之前，我们首先应该去了解一下什么是模板引擎？模板引擎就是将数据转变为一种视图的解决方案。例如vue中的v-for是如何将数据自动循环渲染到页面的呢？
1)前端经历的四种将数据变为视图的方案
1.纯DOM法
<!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>
<ul id="container">
</ul>
<script>
var arr = [
{ "name": "张三", "age": 18},
{ "name": "李四", "age": 100},
];
var container = document.getElementById('container');
for (var i = 0; i < arr.length; i++) {
// 每遍历一项，都要用DOM方法去创建li标签
let oLi = document.createElement('li');
// 创建hd这个div
let hdDiv = document.createElement('div');
hdDiv.className = 'hd';
hdDiv.innerText = arr[i].name + '的基本信息';
// 创建bd这个div
let bdDiv = document.createElement('div');
bdDiv.className = 'bd';
// 创建三个p
let p1 = document.createElement('p');
p1.innerText = '姓名：' + arr[i].name;
bdDiv.appendChild(p1);
let p2 = document.createElement('p');
p2.innerText = '年龄：' + arr[i].age;
bdDiv.appendChild(p2);
// 创建的节点是孤儿节点，所以必须要上树才能被用户看见
oLi.appendChild(hdDiv);
// 创建的节点是孤儿节点，所以必须要上树才能被用户看见
oLi.appendChild(bdDiv);
// 创建的节点是孤儿节点，所以必须要上树才能被用户看见
container.appendChild(oLi);
}
</script>
</body>
</html>
2.数组join（）法
<!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>
<ul id="container">
</ul>
<script>
var arr = [
{ "name": "张三", "age": 18},
{ "name": "李四", "age": 100},
];
var container = document.getElementById('container');
// 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
for (let i = 0; i < arr.length; i++) {
list.innerHTML += [
'<li>',
' <div class="hd">' + arr[i].name + '的信息</div>',
' <div class="bd">',
' <p>姓名：' + arr[i].name + '</p>',
' <p>年龄：' + arr[i].age + '</p>',
' </div>',
'</li>'
].join('')
}
</script>
</body>
</html>
3.ES6的反引号法
<!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>
<ul id="container"></ul>
<script>
var arr = [
{ "name": "张三", "age": 18},
{ "name": "李四", "age": 100},
];
var container = document.getElementById('container');
// 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
for (let i = 0; i < arr.length; i++) {
list.innerHTML += `
<li>
<div class="hd">${arr[i].name}的基本信息</div>
<div class="bd">
<p>姓名：${arr[i].name}</p>
<p>年龄：${arr[i].age}</p>
</div>
</li>
`;
}
</script>
</body>
</html>
4.mustache（Vue采用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<script type="module">
import mustache from './mustache.js'
var templateArr = `
<ul>
{{#arr}}
<li>
<div>{{name}}的基本信息</div>
<p>{{name}}</p>
<p>{{age}}</p>
</li>
{{/arr}}
</ul>
`
var data = {
arr: [
{name: '张三',age: 18},
{name: '李四',age: 100}
]
}
console.log(mustache.render(templateArr,data))
var view = mustache.render(templateArr,data)
document.getElementById('container').innerHTML = view
</script>
</body>
</html>
2.mustache的底层原理
1.为什么是tokens
weiwan....
