vue3源码

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

一、什么是模板引擎

模板引擎是将数据转变为视图最优雅的方案。

二、四种曾经出现的数据变为视图的方法

• 纯DOM法（没有使用价值）

<ul id="list"></ul> <script> var arr = [ { "name": "小明", "age": 12, "sex": "男" }, { "name": "小绿", "age": 15, "sex": "男" }, { "name": "小红", "age": 13, "sex": "女" } ]; var list = document.getElementById('list'); for (let i = 0; i < arr.length; i++) { let oLi = document.createElement('li'); let hdDiv = document.createElement('div'); oLi.innerText = arr[i].name + '基本信息'; hdDiv.innerText ='年龄：'+ arr[i].age list.appendChild(oLi) list.appendChild(hdDiv) } </script> 

• 数组join法（较为麻烦）

for (let i = 0; i < arr.length; i++) { // 按住滚轮往下拖 list.innerHTML += [ '<li>', ' <div class="hd">'+arr[i].name+'的基本信息</div>', ' <div class="bd">', ' <p>年龄：'+arr[i].age+'</p>', ' <p>姓名：'+arr[i].name+'</p>', ' <p>性别：'+arr[i].sex+'</p>', ' </div>', '</li>', ].join('') } 

• ES6的反引号法 —— ES6中新增的 ${a}语法糖，很好用

 for (let i = 0; i < arr.length; i++) { list.innerHTML += ` <li> <div class="hd">${arr[i].name}的基本信息</div> <div class = "bd"> <p>年龄：${arr[i].age}</p> <p>姓名：${arr[i].name}</p> <p>性别：${arr[i].sex}</p> </div> </li> `; } 

• 模板引擎（最优雅的方案）

三、mustache用法

1、mustache库简介

• 官网git：github.com/janl/mustac…
• mustache是“胡子”的意思，因为它的嵌入标记{{}}非常像胡子；
• {{}}的语法也被Vue沿用；
• mustache是最早的模板引擎库，比Vue诞生的早，它的底层实现机理在当时是非常有创造性的、轰动性的，为后续模板引擎的发展提供了崭新的思路。

2、mustache库基本使用

必须要引入mustache库，可以在bootcdn.cn上找到它。

• mustache基本使用 - 不循环

<div id="list"></div> // 引入 <script src="./jslib/mustache.js"></script> <script> var templateStr = ` <h1>我买了一个{{thing}}，我很{{mood}}</h1> `; var data = { thing:"电脑", mood:"快乐" }; var domStr = Mustache.render(templateStr, data); //上树 var list = document.getElementById('list'); list.innerHTML = domStr </script> 

• mustache基本使用 - 循环简单数组

var templateStr = ` <h1> {{#arr}} <li>{{.}}</li> {{/arr}} </h1> `; var data = { arr:['a','b','c','d'] }; 

• mustache基本使用 - 循环对象数组

<ul> {{#arr}} <li> <div class="hd">{{name}}的基本信息</div> <div class = "bd"> <p>年龄：{{age}}</p> <p>姓名：{{name}}</p> <p>性别：{{sex}}</p> </div> </li> {{/arr}} </ul> 

• mustache基本使用 - 嵌套数组

var templateStr = ` <h1> {{#arr}} {{name}}的爱好是： <ol> {{#hobbies}} <li>{{.}}</li> {{/hobbies}} </ol> {{/arr}} </h1> `; var data = { arr: [ { "name": "小明", "age": 12, "sex": "男", hobbies: ['游戏', '改bug', '跑步'] }, { "name": "小绿", "age": 15, "sex": "男", hobbies: ['游戏', '羽毛球', '学前端'] }, { "name": "小红", "age": 13, "sex": "女", hobbies: ['游戏', '敲代码', '睡觉'] } ] }; 

• mustache基本使用 - 布尔值

var templateStr = ` {{#m}}你好！{{/m}} `; var data = { m: true };