当我应该使用render:h => h(App)？

Question

通过文档,我不完全理解何时应该使用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
})

来自文档:

Vue建议在绝大多数情况下使用模板来构建HTML.但是,在某些情况下,您确实需要JavaScript的完整编程能力.这就是你可以使用渲染功能的地方