咱來聊聊 Vue - compile

在 vue 里, 模板編譯也是非常重要的一部分, 里面也非常復雜, 這次探究不會深入探究每一個細節, 而是走一個全景概要, 來吧, 大家和我一起去一探究竟

初體驗

我們看了 Vue 的初始化函數就會知道, 在最后一步, 它進行了 __vm.$mount(el)__ 的操作, 而這個 $mount 在兩個地方定義過, 分別是在 entry-runtime-with-compiler.js(簡稱: eMount) 和 runtime/index.js(簡稱: rMount) 這兩個文件里, 那么這兩個有什么區別呢?// entry-runtime-with-compiler.js

constmount=Vue.prototype.$mount// 這個 $mount 其實就是 rMount

Vue.prototype.$mount=function(

el?:string|Element,

hydrating?:boolean

):Component{

constoptions=this.$options

if(!options.render){

...

if(template){

const{render,staticRenderFns}=compileToFunctions(template,{

shouldDecodeNewlines,

shouldDecodeNewlinesForHref,

delimiters:options.delimiters,

comments:options.comments

},this)

options.render=render

options.staticRenderFns=staticRenderFns

}

...

}

returnmount.call(this,el,hydrating)

}

其實 eMount 最后還是去調用的 rMount, 只不過在 eMount 做了一定的操作, 如果你提供了 render 函數, 那么它會直接去調用 rMount, 如果沒有, 它就會去找你有沒有提供 template, 如果你沒有提供 template, 它就會用 el 去查詢 dom 生成 template, 最后通過編譯返回了一個 render 函數, 再去調用 eMount

從上面可以看出, 最重要的一部分就是 compileToFunctions 這個函數, 它最后返回了 render 函數, 關于這個函數, 它有點復雜, 我畫了一張圖來看一看它的關系, 可能會有誤差, 希望大俠們可以指出

編譯三步走

看一下這個編譯的整體過程, 我們其實可以發現, 最核心的部分就是在這里傳進去的 baseCompile 做的工作:

parse: 第一步, 我們需要將 template 轉換成抽象語法樹 (AST)

optimizer: 第二步, 我們對這個抽象語法樹進行靜態節點的標記, 這樣就可以優化渲染過程

generateCode: 第三步, 根據 AST 生成一個 render 函數字符串

好了, 我們接下來就一個一個慢慢看

解析器

在解析器中有一個非常重要的概念 AST, 大家可以去自行了解一下

在 Vue 中, ASTNode 分幾種不同類型, 關于 ASTNode 的定義在 flow/compile.js 里面, 請看下圖:

我們用一個簡單的例子來說明一下:

Latest vue.js Commits

{{1 + 1}}

總結

以上是生活随笔為你收集整理的vue compile添加html,咱来聊聊 Vue - compile的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。