学习vuejs的时候对这句代码不理解

new Vue({
el: '#app',
router,
store,
i18n,
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-参数

官网介绍的很清楚,这样应该可以理解了。

如何理解render: h => h(App)的更多相关文章

  1. 关于Vue中的 render: h => h(App) 具体是什么含义?

    render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步 ...

  2. Vue render: h => h(App) $mount

    $mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...

  3. vue中render: h => h(App)的详细解释

    2018年06月20日 10:54:32 H-L 阅读数 5369   render: h => h(App) 是下面内容的缩写:   render: function (createEleme ...

  4. vue-cli: render:h => h(App)是什么意思

    import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: ...

  5. 解析vue2.0中render:h=>h(App)的具体意思

    render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...

  6. render:h => h(App) 是什么意思?

    在学习vue.js时,使用vue-cli创建了一个vue项目,main.js文件中有一行代码不知道什么意思.在网上搜索得到如下解答: 参考一:https://www.cnblogs.com/longy ...

  7. Vue2.0 render:h => h(App)

    new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...

  8. Vue中render: h => h(App)的含义

    // ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...

  9. render: h => h(App) $mount 什么意思

    初始一个vue.js项目时,常常发现main.js里有如下代码: new Vue({ render: h => h(App) }).$mount('#app') 这什么意思?那我自己做项目怎么改 ...

随机推荐

  1. Java中array、List、Set互相转换

    数组转List String[] staffs = new String[]{"A", "B", "C"}; List staffsList ...

  2. 洛谷P4704 太极剑(乱搞)

    题意 题目链接 Sol 不会正解 写了发暴力过了,貌似跑的还挺快?.. // luogu-judger-enable-o2 // luogu-judger-enable-o2 #include< ...

  3. centos6 自带python2.6升级python2.7+

    centos6系统自带Python为2.6.6版本,升级搞版本操作如下(python2-python3都一样) 1.下载需要升级的python包 官方下载地址:https://www.python.o ...

  4. ABP问题速查表

    如果你领导要让你一夜之间掌握ABP,并且用ABP撸一个项目出来,你很可能很快速的过了一遍ABP文档就马上动手干活了.那么这篇文章就很适合你. 这篇文章列出了很多ABP新手问的问题和解答.注:有些同学问 ...

  5. GIS开发之数据查询

    在GIS开发之我们经常会用到属性查询和空间查询,特别是在数据量比较大的时候,如何提高查询效率成为一个问题 1.属性查询 对于属性查询,除了必要的建索引之外,我们还应该考虑使用字段缓存:减少查询字段,减 ...

  6. [20190130]删除tab$记录的恢复2.txt

    [20190130]删除tab$记录的恢复2.txt --//前面链接写好了脚本,开始测试删除后的恢复.千万不要在生产系统做这样的测试!!--//参考链接:http://blog.itpub.net/ ...

  7. [20180926]神奇的规避ORA-01795方法.txt

    [20180926]神奇的规避ORA-01795方法.txt --//大家知道in里面的值限制1000个值,如果超出报ORA-01795错误. D:\> ooerr 0179501795, 00 ...

  8. Spring MVC 静态资源处理 (三)

    完整的项目案例: springmvc.zip 目录 实例 项目结构: 一.配置web.xml <?xml version="1.0" encoding="UTF-8 ...

  9. 自动化测试基础篇--Selenium等待时间

    摘自https://www.cnblogs.com/sanzangTst/p/8376221.html 当你觉得你的定位没有问题,但是却直接报了元素不可见,那你就可以考虑是不是因为程序运行太快或者页面 ...

  10. Java中的生产消费者问题

    package day190109; import java.util.LinkedList; import java.util.Queue; import java.util.Random; pub ...