当我应该使用render：h =＆gt; H（APP）？

Question

docs我不完全明白应该何时使用render: h => h(App)功能。

例如，我有一个非常简单的Vue应用程序：

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    components: { App }
})

当我需要添加代码时会出现什么情况：render: h => h(App)？

Answer 1

在您发布的示例中，App.vue表示主应用程序包装器 - 所有相关的.vue组件文件都将在那里导入。

因此，在Vue实例中，您定义了组件对象，并添加了App组件，但是如何将该组件完全挂载到实例并显示它？

要记住以下几点：

• 这不是.vue文件，因此您没有模板标记选项。这是一个纯.js文件
• 您无法将<App></App>放入template属性，因为您只使用运行时构建，因此模板选项不可用

一个选项是使用渲染功能。这是Vue.js在幕后所做的事情。它采用您的模板，然后模板编译器将其转换为渲染函数。

或者，您可以使用扩展运算符代替渲染函数：

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    ...App
})

来自docs：

  

Vue建议使用模板来构建绝大多数HTML   的情况。然而，在某些情况下，你真的需要完整的   JavaScript的程序化力量。这就是你可以使用渲染的地方   功能

Answer 2

你可以这样做：

import Vue from 'vue'
import App from './App.vue'

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