>[success] # 代碼分析轉譯模板 ~~~js 1.之前分析過了，即使我們使用的是'模板方式'的$mount,最后也是調用也是'’解析函數'的$mount, 因此在'模板方式'的$mount中會通過'compileToFunctions'將template編譯成render函數 /*將template編譯成render函數，這里會有render以及staticRenderFns兩個返回， 這是vue的編譯時優化，static靜態不需要在VNode更新時進行patch，優化性能*/ const { render, staticRenderFns } = compileToFunctions(template, { shouldDecodeNewlines, delimiters: options.delimiters }, this) ~~~ >[info] ## 分析template編譯成render函數過程 [什么是模板編譯](https://vue-js.com/learn-vue/complie/#_1-%E5%89%8D%E8%A8%80) ~~~ 1.引用上面文章里的一段：把用戶在<template></template>標簽中寫的類似于原生HTML的內容進行編譯，把原生 HTML的內容找出來，再把非原生HTML找出來，經過一系列的邏輯處理生成渲染函數，也就是render函數的這 一段過程稱之為模板編譯過程。 2.Vue會將這些模板轉化成AST，抽象語法樹，最終得到的 AST 通過一些特定的屬性， 能夠比較清晰地描述出標簽的屬性以及依賴關系，說通俗點:一個簡單的HTML標簽的代碼被 轉換成了一個JS對象，而這個對象中的屬性代表了這個標簽中一些關鍵有效信息。 3.整個解析過程： 3.1.模板解析階段——解析器——源碼路徑：src/compiler/parser/index.js; 3.2.優化階段——優化器——源碼路徑：src/compiler/optimizer.js; 3.3.代碼生成階段——代碼生成器——源碼路徑：src/compiler/codegen/index.js ~~~ * 解析過程詳細分析 [參考Vue源碼系列-Vue中文社區](https://vue-js.com/learn-vue/complie/#_1-%E5%89%8D%E8%A8%80) * 引用 掘金小測《剖析 Vue.js 內部運行機制》里面提供AST的樣子 ~~~ // 轉譯前 <div :class="c" class="demo" v-if="isShow"> <span v-for="item in sz">{{item}}</span> </div> ~~~ ~~~ // 轉譯后 { /* 標簽屬性的map，記錄了標簽上屬性 */ 'attrsMap': { ':class': 'c', 'class': 'demo', 'v-if': 'isShow' }, /* 解析得到的:class */ 'classBinding': 'c', /* 標簽屬性v-if */ 'if': 'isShow', /* v-if的條件 */ 'ifConditions': [ { 'exp': 'isShow' } ], /* 標簽屬性class */ 'staticClass': 'demo', /* 標簽的tag */ 'tag': 'div', /* 子標簽數組 */ 'children': [ { 'attrsMap': { 'v-for': "item in sz" }, /* for循環的參數 */ 'alias': "item", /* for循環的對象 */ 'for': 'sz', /* for循環是否已經被處理的標記位 */ 'forProcessed': true, 'tag': 'span', 'children': [ { /* 表達式，_s是一個轉字符串的函數 */ 'expression': '_s(item)', 'text': '{{item}}' } ] } ] } ~~~ >[danger] ##### 對vue-loader 說明 ~~~ 1.首先你要知道： vue基于源碼構建的有兩個版本，一個是runtime only(一個只包含運行時的版本)， 另一個是runtime + compiler(一個同時包含編譯器和運行時的完整版本)。而兩個版本的區別僅 在于后者包含了一個編譯器。 2.運行時編譯版本，那既然是運行時編譯，也就是在項目每次運行都需要一堆正則對我們的html 進行解析，這種解析無疑是耗時的，但是如果你不想這樣就要每次開發每次都用render 這個成本也是成倍的 3.為了解決上面的矛盾我們如果在編譯階段利用webpack，loader 插件在編譯的過程時候就將這些'.vue' 結尾文件給編譯成render 是不是就可以解決問題了，因此我們使vuecli時候內置這種腳手架，默認使用的是 'runtime',由于'runtime'版本是沒有'compiler'這個編譯器，因此不支持對模板的解析，但又不想寫render 便有了'vue-loader'，他會在在編譯時候進行了轉譯，也就是將運行解析的過程放到了編譯過程中 ~~~