Question

我使用Vue cli并实施main.js模板。

在条目文件render: h => h(App)中，有如下代码：

我知道createElement是App函数的别名，我想知道为什么像SELECT COUNT(CASE WHEN u.status = 'InAct' AND u.left_on < DATEADD(month, month_val - 1, DATEADD(year, year_val - 1900, 0)) THEN NULL ELSE 1 END) AS cnt, r.month_val FROM rat_proj_duration_map r INNER JOIN users u ON r.uid = u.uid WHERE r.year_val = 2018 GROUP BY r.year_val, r.month_val ORDER BY r.year_val, r.month_val这样的单个文件组件可以作为参数传递，官方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>内动态添加为<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作为普通对象传递给根vue实例的render函数。

有关详细信息，您可以查看此video，其中Evan You会更详细地解释它。

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

1 个答案: