1、什么是抽象语法树

出现原由

以下是模板语法，是用户编写的内容：

<div class="box">
    <h3 class="title">我是一个标题</h3>
    <ul>
        <li v-for="item in arr" :key="index">
            {{ item }}
        </li>
    </ul>
</div>

模板语法有个问题，它方便用户编写，但是浏览器读不懂。必须把它变成以下样子，浏览器才能解析：

<div class="box">
    <h3 class="title">我是一个标题</h3>
    <ul>
        <li v-for="item in arr" :key="index">
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </li>
    </ul>
</div>

模板语法想要变成普通HTML语法，必须经过以下过程：

对模板语法的解析过程如下：