Vue中runtime-compiler和runtime-only

发表于 | 分类于 | |

在使用vue-cli创建项目时候会选择使用runtime-compile还是runtime-only模式.
目前在vue-cli2会有此选项，vuecli3没有了。

runtime-only

我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。

1
2
3
4
new Vue({
    el: '#app',
    render: h => h(App)
})

runtime-compiler

1
2
3
4
5
new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
})

比对

runtime-compiler流程为： template->AST->render->VDOM->真实DOM->页面

runtime-only直接就是render这一流程

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版(runtime-compiler)
如果使用runtime-only就会报错

https://www.jianshu.com/p/affa58db63d9