vue Render：h=>h(App) 解析

向右看齐 2022-04-11 09:52 242阅读 0赞

在学习VUE时，发现很多的组件的引入都是用ES6，需要在main.js中写入如下代码：

export default () => {
      const router = createRouter()
      const store = createStore()
    
      const app = new Vue({
        router,
        store,
        render: h => h(App)
      })
    
      return { app, router, store }
    }

其中对 render:h=>h(App) 这句代码不是很理解，所以对此查找了有关资料，以下为结果。

这种写法

{
        render:h=>h(App)
    }

#### 等价于 ####

{
        render:h=>{
            return h(App);
        }
    }

#### 等价于 ####

{
        render:function(h){
            return h(App);
        }
    }

最后，也就是

{
        render:function(creatElement){
            return creatElemnt(App);
        }
    }

#### render:h=>h(App) ####

1、ES6的写法，表示Vue实例选项对象的render方法作为一个函数，接受传入的参数h函数，返回h(App)的函数调用结果  
2、Vue在创建Vue实例时，通过调用render方法来渲染实例的DOM树  
3、Vue在调用render方法时，会传入一个createElement函数作为参数，也就是这里的h的实参是createElement函数，然后createElement会以App为参数进行调用，关于createElement函数说明参见：[https://cn.vuejs.org/v2/guide/render-function.html\#createElement-参数][https_cn.vuejs.org_v2_guide_render-function.html_createElement-]

[https_cn.vuejs.org_v2_guide_render-function.html_createElement-]: https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-router源码解析

码下载：[github.com/vuejs/vue-r…][github.com_vuejs_vue-r] 1. 简述 vue-router基于Vue组件化的概念...

末蓝、/ 2024年04月17日 13:59/ 0 赞/ 65 阅读

相关 Vue | vue cli入口文件解析

作者：MGsniper 链接：https://blog.csdn.net/qq\_36145914/article/details/86497123 来源：CSDN。

曾经终败给现在/ 2023年07月15日 09:06/ 0 赞/ 63 阅读

相关 vue的指令解析

1. v-if v-else v-else-if：条件渲染和js中的if..else类似 2. v-for：循环 3. v-on：绑定事件 4. v-bind：绑定属

迈不过友情╰/ 2023年01月17日 03:22/ 0 赞/ 176 阅读

相关 Vue —— 响应式解析

简单介绍 defineReactive <!DOCTYPE html> <html lang="en"> <head> <meta

墨蓝/ 2022年12月13日 12:56/ 0 赞/ 203 阅读

相关 vue-router 解析

本文将以最简单的方式解析`vue-router`实现原理，最全的实现过程请参考源码核心步骤先简单回顾一下原生`vue-router`的使用方式 `router/i

「爱情、让人受尽委屈。」/ 2022年12月11日 13:53/ 0 赞/ 250 阅读

相关 Vue 源码解析

Vue 源码解析框架地址 [https://www.processon.com/view/link/5d1eb5a0e4b0fdb331d3798c\map][http

水深无声/ 2022年12月11日 11:27/ 0 赞/ 268 阅读

相关 vue router路由解析

一、前言 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。二、安装 1.安装包

谁借莪１个温暖的怀抱￠/ 2022年12月02日 13:39/ 0 赞/ 130 阅读

相关 Vue生命周期解析

Vue的生命周期包括： beforeCreate：实例刚刚创建，数据检测和事件初始化都未开始 created：数据检测和事件初始化完毕，还未开始编译模板

古城微笑少年丶/ 2022年09月30日 12:57/ 0 赞/ 197 阅读

相关 Vue_基础框架目录解析

当我们用npm生成一个项目的时候，我们要了解这个项目的文件 ![这里写图片描述][70] 1.index.html 是所有HTML的入口，点开该index.html 可

女爷i/ 2022年05月22日 13:10/ 0 赞/ 222 阅读

相关 Vue源码解析

[https://ustbhuangyi.github.io/vue-analysis/][https_ustbhuangyi.github.io_vue-analysis]

红太狼/ 2022年05月14日 04:40/ 0 赞/ 362 阅读