Vue源码：mustache模板解析

什么是模板引擎

模板引擎是将数据变为视图最优雅的解决方案，如下可以通过左侧数据最终在网页上渲染成右侧dom视图

数据变为视图的方法

历史上出现的数据变为视图的方法有四种：纯DOM法、数组join法、ES6反引号法、mustache模板引擎法，可以说越来越优雅。

如下数据采用各种方法渲染

    <div>
        <ul class="list">

        </ul>
    </div>

    <script>
        let students = [{
     
                name: '小明',
                age: 18
            },
            {
     
                name: '小红',
                age: 19
            },
            {
     
                name: '小华',
                age: 20
            },
        ];
    </script>

1.纯DOM法
纯DOM法就是通过对DOM的原生操作(获取节点、创建节点、添加节点)来将数据拼接添加

<script>
    for (let i = 0; i < students.length; i++) {
   
        let list = document.querySelector('.list');
        let li = document.createElement('li');
        let p1 = document.createElement('p');
        p1.innerText = '我是' + students[i].name;
        let p2 = document.createElement('p');
        p2.innerText = '我今年' + students[i].age + '岁';
        list.appendChild(li);
        li.appendChild(p1);
        li.appendChild(p2);
    }
</script>

如上可以看出像渲染一个简单的students数据却非常繁琐，通过获取节点，然后创建节点，添加节点。

2.数组join法
曾经非常流行，通过数组join的方法，将模板字符串通过数组分段join连接起来，从而可以达到一种看似换行的效果

   <script>
        let list = document.querySelector('.list');
        for (let i = 0; i < students.length; i++) {
   
            list.innerHTML += [
                '            <li>',
                '                <p>我是' + students[i].name + '</p>',
                '                <p>我今年' + students[i].age +