Vue原理 十三 模板編譯

模板是什麼？

模板不是html,有指令，插值、js表示式，能判斷、迴圈

html是標籤語言，只有js才能實現判斷、迴圈（圖靈完備的）

因此，模板一定是轉換為某種js**，即編譯模板

1、前置知識： with語法

const obj =

console.log(obj.a) //100
console.log(obj.b) //200
console.log(obj.c) //undefined
with(obj)

如果找不到匹配的onj屬性，就會報錯

with慎用，它打破了作用域規則，易讀性變差

新建資料夾 demo-mbby，初始化npm環境,生成了package.json檔案

npm init -y

新建index.js檔案

執行node index.js將模板轉換為js**

function installrenderhelpers(target)

插值模板編譯：

const template=`}

`with(this)
this => const vm = new vue()
createelement => vnode
//編譯
const res = compiler.compile(template)
console.log(res.render)

const template = `}

`with(this)
//編譯
const res = compiler.compile(template)
console.log(res.render)
//編譯
const res = compiler.compile(template)
console.log(res.render)

const template = ``

with(this) },
[_c('img', })]
)}//編譯
const res = compiler.compile(template)
console.log(res.render)

const template =

`ab`
with(this) 
//編譯
const res = compiler.compile(template)
console.log(res.render)

const template =

` 
`with(this) , [_v(_s(item.title))])
}), 0)
}//編譯
const res = compiler.compile(template)
console.log(res.render)

const template =`

submit
`with(this) }, [_v("submit")])
}//編譯
const res = compiler.compile(template)
console.log(res.render)

const template = ``

with(this) ],
attrs: ,
domprops: ,
on: }})
}//編譯
const res = compiler.compile(template)
console.log(res.render)

模板編譯為rander函式，執行render函式返回vndoe

基於vnode在執行patch和diff ，進行渲染和更新

使用webpack vue -loader，會在開發環境下編譯模板 *****

複雜情況下，不能用template，可以考慮用render

react一直都用render（沒有模板）

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模板編譯

vue 的模板編譯是在 mount的過程中進行的，在 mount 的時候執行了compile 方法來將 template 裡的內容轉換成真正的 html complie 最終生成 render 函式字串，等待呼叫。這個方法分為三步 parse解析 ast 的全稱是 abstract syntax t...