將模板字串轉成element ast
通過正則去匹配生成乙個 ast 樹
例如：
}
,
children: [
,attrslist: ,
attrsmap: {},
children: [}",
static: false,
expression: "_s(name)"}]}
]}
通過乙個棧記錄乙個層級，用來記錄dom的深度
當解析到乙個 開始標籤 或者 文字，無論是什麼， stack 中的最後一項，永遠是當前正在被解析的節點的 parentnode 父節點標記靜態節點打上標記，靜態節點指dom不需要變的點
打上靜態節點有兩個好處
1.重新渲染的時候不需要重新生成
2.在虛擬dom打補丁的時候可以直接跳過
方法：1.遞迴遍歷樹給每個節點打上static標記，並確認是否是靜態節點
2.找出是否為靜態根節點
靜態節點： 1. type 為2
2. node.pre 為 true && node.hasbindings (/v-|@|^:/)不能為 true
&& 元素節點不能有 if 和 for屬性。
&& 元素節點不能是 slot 和 component
&& 元素節點不能是元件
&& 元素節點的父級節點不能是帶 v-for 的 template
element asts 生成 render 函式**字串
with(this)第乙個引數是乙個html標籤名
第二個引數是元素上使用的屬性所對應的資料物件，可選項
第三個引數是 children
_v 的意思是建立乙個文字節點。
_s 是返回引數中的字串。
**生成器的總體邏輯其實就是使用 element asts 去遞迴，然後拼出這樣的 _c(『div』,[_c(『p』,[_v(_s(name))])]) 字串
Vue原理之模板編譯
模板內容 type text v model message div div vue指令碼 let vm new vue 複製 看到上面的 使用過vue的同學能知道頁面的渲染結果會如下圖所示 那他是如何進行渲染的呢，我們帶著問題來進入正題。class vue 複製 以上 就是對new vue時傳遞的...
Vue原理 十三 模板編譯
模板是什麼？模板不是html,有指令，插值 js表示式，能判斷 迴圈 html是標籤語言，只有js才能實現判斷 迴圈 圖靈完備的 因此，模板一定是轉換為某種js 即編譯模板 模板編譯在元件渲染過程中的作用 1 前置知識 with語法 const obj console.log obj.a 100 c...
vue模板編譯
vue 的模板編譯是在 mount的過程中進行的，在 mount 的時候執行了compile 方法來將 template 裡的內容轉換成真正的 html complie 最終生成 render 函式字串，等待呼叫。這個方法分為三步 parse解析 ast 的全稱是 abstract syntax t...