runtimecompiler與runtimeonly的異同

2023-04-17 12:36:55

vue的運作過程

如果你需要用戶端編譯模闆

例如，向template選項傳入一個字元率，或者需要将模闆中的非DOM的HTML挂到一個元素上

你需要帶有編譯器的版本，因而需要完整建構版本

//這種情況需要編譯器(comoiler)
new Vue({
    template:'<div>{{ h }}</div>'
})
//這種情況下不需要
new Vue({
    render (h) {
        return b('div', this.h) 
    }
})

在使用vue-loader或vueify時，*.vue檔案中的模闆會在建構時(build time)預編譯(pre-compile)為JavaScript,最終生成的bundle中你不再需要編譯器(compiler)，是以可以直接使用隻含有運作時的建構版本(runtime-only)

用于運作時的版本比其它全面版本的重量輕約30%，應該盡可能使用隻含有運作時的建構版本

如果你仍需要使用完整版本，則需要在捆綁程式中配置别名

Runtime-Compiler
new Vue({
    el: '#app',
    components: { App },
    template: '<App/a.'
})

==Vue中的模闆如何最終渲染成真實DOM

template -> ast -> render -> vdom -> UI

Runtime-only
new Vue({
    el: '#app',
    render: h => h(App)
})

Vue中的模闆如何最終渲染成真實DOM

render -> vdom -> UI