关于 app.vue 组件的 render 函数问题

Question

就像大多数的 app.vue 一样

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  name:'app',
  data ....
}
</script>

老师请问,这一节中的 createComponent函数的参数 Ctor是 app export 的对象,那么请问老师,那我在 template 中的 html 是在何时编译成 render 函数的呢?是 vue-loader 么,是的话,我不是纠结怎么编译的,我是纠结在哪里 将编译后的组件类型的 render 函数 产生的 vNode,与createComponent产生的 vNode 结合在一起的? 还是其他逻辑,不知道老师听懂我的意思么…总之,就是 template 产生的 vNode 在哪里…

Answer 1

前端工程师666777888 2021-04-02 17:23:23

1、进入项目：在new Vue时会在vm.$mount()中生成一个render函数

这个render函数的参数包含了整个项目的信息

2、render函数的参数实际上是个函数：createElement函数，这个createElement函数总共可以传4个参数。

render函数仅仅是个外壳，其实真正执行的是createElement函数

3、其实支撑整个项目的是第一个和第三个参数

第一个参数基本上是div

第二个参数是div上的属性，基本可有可无

第三个参数是children。就是你要说的问题所在：children中包含所有子节点。

其实children中放的是：createElement()    

________________________________________________________________________

在执行createElement函数时，其实先执行它的四个参数。

第三个参数children中可能还有createElement函数。

__________________________________________________________________

render: function (createElement) {

    return createElement(

         'div',    // 第一个参数

          {},     // 第二个参数    不用考虑

         [createElement(),createElement(),createElement()],   // 第三个参数

        2)     // 第四个参数    不用考虑

}

4个参数类似这种。先把children中的vnode生成，children中的vnode都生成完。

再调用挨着return 的最外面的createElement函数   这样就把真个项目的vnode生成了

Answer 2

ustbhuangyi 2020-08-06 10:57:50

render 函数执行的过程就是去创建组件的 vnode 树啊，看一下 render 函数的结果就知道了，参考：

https://cn.vuejs.org/v2/guide/render-function.html#%E6%A8%A1%E6%9D%BF%E7%BC%96%E8%AF%91

• 提问者 fy000 #1

  老师,我可能说的不太准确,就是对于.vue 单文件组件生产 render 这个时机没弄懂
  经过查资料,老师请问是不是这样子的:
  在Vue.prototype.$mount定义中,会判断是否有 render函数,没有则转换,那么针对于.vue 文件,是不是在项目运行编译的时候,已经通过 vue-loader 转换成为了 render 函数,也就是说, 在$mount的时候,此时已经存在了转换后的 render 函数? 老师请问是这样么? 
   回复无法 markdown 语法,就粘贴一下在某个知乎的回答看到的:
  => 
   Template：每个*.vue. 文件一次最多可以包含一个 <template> 块；内容将被提取并传递给 vue-template-compiler 并预编译为 JavaScript 渲染函数，最后注入<script> 部分的导出组件中 
   <=
  老师他说的这个过程就是在运行编译阶段 转换成 render 对吧,也就是 mount之前已经将 template转换成了 render?

• ustbhuangyi 回复 提问者 fy000 #2

  是的，.vue 文件会通过 vue-loader 处理，离线把 template 编译成 render 函数，然后添加到组件对象上。然后浏览器运行时的时候，组件就已经有 render 函数了。

• 提问者 fy000 回复 ustbhuangyi #3

  多谢! ..劳您费心