Runtime-Compiler 和 Runtime-only 的区别

Runtime-Compiler：

template -> ast(抽象语法树) -> render -> visual Dom -> UI

import Vue from 'Vue'
import App from './App'   // App 为创建的.vue文件，表示App组件

new Vue({
    el: '#app',
    template: '</app>',
    components: { App }
})

Runtime-only:

render -> visual Dom -> UI

import Vue from 'Vue'
import App from './App'   // App 为创建的.vue文件，表示App组件

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

箭头函数等同于：

render: function(h) ({
        return h(App)
    })

即Runtime-Compiler 相比于Runtime-only 多了一个 “template -> ast” 的过程，所以 Runtime-only 性能更高，代码量更少。

Runtime-Compiler模式中，也可以直接使用 render 函数，省略掉 “template -> ast” 这个过程：

new Vue({
    el: '#app',
    render: function (creatElement) {
        return creatElement(App)
    }
})

虽然App.vue 文件中也存在 “template”, 但是其最终编译的时候，所有“template”都已经被渲染成一个 “render” 函数了，在调用App 时，其中已经不存在 “template” 元素了。那么， .vue文件中的template 是由谁处理的呢？

vue-template-compiler

若需要正确加载.vue文件，需安装 “vue-loader” 和 “vue-template-compiler”

npm vue-loader vue-template-compiler --save-dev

总结：

1.若在之后的开发中，依然使用 “template” ,就需要选择 Runtime-Compiler
2. 若在之后的开发中，使用的是 “.vue” 文件夹开发，则可以选择Runtime-only