为什么Vue render函数可以处理单文件组件？

Question

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

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

render: h => h(App)

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

有人知道这是为什么吗？

Answer 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> 在 vue-style-loader.

的帮助下作为 <style> 标签

例如，如果 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 导入并在根 vue 实例中作为

使用

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

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

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

为什么Vue render函数可以处理单文件组件？

Why can Vue render function process single file component?

render

vue.js

vue-cli