vue 的模板編譯是在$mount的過程中進行的，在 $mount 的時候執行了compile 方法來將 template 裡的內容轉換成真正的 html **。
complie 最終生成 render 函式字串，等待呼叫。這個方法分為三步：
parse解析
ast 的全稱是 abstract syntax tree，也就是所謂抽象語法樹。
每乙個 ast 節點存放的就是我們的html 元素、插值表示式或文字內容。ast 正是 parse 函式生成和返回的。
optimize() 優化
會對 parse 生成的 ast 進行靜態內容的優化。靜態內容指的是和資料沒有關係，不需要每次都重新整理的內容。標記靜態節點的作用是為了在後面做 vnode 的 diff 時起作用，用來確認乙個節點是否應該做 patch 還是直接跳過。optimize 的過程分為兩步：
generate()
generate 函式的輸入也是 ast，它遞迴了 ast 樹，為不同的 ast 節點建立了不同的內部呼叫方法，等待後面的呼叫。生成 render 函式字串。
經過解析後，接下來 vue 做的事情就是 new watcher（），這個時候會對繫結的資料執行監聽，render 函式就是資料監聽的**所呼叫的，其結果便是重新生成 vnode。
當這個 render 函式字串在第一次 mount、或繫結的資料更新的時候，都會被呼叫，生成 vnode。
如果是資料的更新，那麼 vnode 會與資料改變之前的 vnode 做 diff，對內容做改動之後，就會更新到我們真正的 dom 上。
Vue模板編譯原理
將模板字串轉成element ast 通過正則去匹配生成乙個 ast 樹 例如 生成對應的ast children attrslist attrsmap children static false,expression s name 通過正則去匹配起始標籤生成對應的tag等資訊 通過乙個棧記錄乙個層...
Vue原理之模板編譯
模板內容 type text v model message div div vue指令碼 let vm new vue 複製 看到上面的 使用過vue的同學能知道頁面的渲染結果會如下圖所示 那他是如何進行渲染的呢，我們帶著問題來進入正題。class vue 複製 以上 就是對new vue時傳遞的...
vue中的模板編譯
正則，匹配不捕獲 不捕獲當前的分組 至少乙個 盡可能少匹配 原始碼裡的模板編譯 也是基於正則的 const defaultre g export const util vm compilertext node,vm node.textcontent node.textcontent.replace ...