为什么 Vue 渲染函数可以处理单个文件组件？答案

【问题标题】：Why can Vue render function process single file component?为什么 Vue 渲染函数可以处理单个文件组件？
【发布时间】：2018-09-05 16:12:55
【问题描述】：

我使用 Vue cli 并实现 simple-webpack 模板。

在入口文件main.js中，有如下代码：

render: h => h(App)

我知道h是createElement函数的别名，不知道为什么像App这样的单个文件组件可以作为参数传入，vue官方文档没有提到这一点。

有人知道这是为什么吗？

【问题讨论】：

标签： vue.js render vue-cli

【解决方案1】：

vue js 中的单文件组件（SFC）有一个.vue 扩展名。

在 webpack 中，我们使用一个名为 vue-loader 的加载器来测试 .vue 文件

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
      }
      // other vue-loader options go here
    }
}

这些 SFC 被转换成普通的 es6 modules 。

<template> 部分被vue-template-complier 转化为渲染函数并注入到导出的模块中。

<style> 标记由任何 sass 或更少的预处理器类似地处理，然后由Post-css 相应地处理 CSS 范围，并在 <head> 的帮助下动态添加为 <style> 标记vue-style-loader.

例如，如果 App.vue 文件如下所示：

<template>
    <div>
        <p class="myClass">{{msg}}</p>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                msg: "Vue is awesome!"
            }
        }
    }
</script>

它被转换为一个普通的模块，导出为如下所示的对象：

export default {
    data(){
        return{
            msg: "Vue is awesome!"
        }
    },
    render(createElement) {
        return createElement("div", 
            [createElement("p", {class: {'myClass': true}}), this.msg]
        )
    }
}

这是作为import App from './path/to/App.vue 导入并在root vue 实例中使用

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

您可以查看这个fiddle，其中App 作为普通对象传递给root vue 实例的render 函数。

有关更多详细信息，您可以查看此video，其中 Evan You 对此进行了更详细的解释。

【讨论】：

这太棒了！谢谢兄弟，你太专业了！
@ArelLin :-)...有很多比我更好的...我们都在这里学习...我从 bert那里学到了很多> - [stackoverflow.com/users/38065/bert] 和 acdcjunior - [stackoverflow.com/users/1850609/acdcjunior] 在 vue.js 标签上保持活跃