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

向右看齐 2022-04-11 09:52 153阅读 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 条评论，153人围观）

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

相关阅读

相关 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 赞/ 104 阅读

相关 Vue3源码 nextTick解析

![format_png][] > 定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 看完是不是有一堆问号？我们从

╰+哭是因爲堅強的太久メ/ 2022年12月23日 07:24/ 0 赞/ 109 阅读

相关 Vue —— 响应式解析

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

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

相关 vue-router 解析

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

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

相关 Vue 源码解析

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

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

相关 vue router路由解析

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

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

相关 Vue生命周期解析

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

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

相关 Vue_基础框架目录解析

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

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

相关 Vue源码解析

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

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

相关 Vue响应式原理深入解析

Vue最明显的特性之一便是响应式系统，其数据模型即是普通的 JavaScript 对象。而当你读取或写入它们时，视图便会进行响应操作。响应式data： <div

阳光穿透心脏的1/2处/ 2021年12月24日 11:11/ 0 赞/ 280 阅读