render: h => h(App)的含义

常见问题解答

不错鼓励并赞赏 标签: Javascript      评论 / 2019-04-02

让我们一起看看render的官方文档如何诠释的

  • 类型:(createElement: () => VNode) => VNode

  • 详细

字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

  • 参考:渲染函数

说明第一个参数就是createElement,那么h => h(App)的写法就是:

  1. function(h){
  2. h(App)
  3. }

以上对应到render的函数写法中可以看到

  1. function(createElement){
  2. createElement(App)
  3. }

最后详细代码片段如下:

  1. new Vue({
  2. render:function(createElement){
  3. createElement(App)
  4. },
  5. }).$mount('#app')

总结

说道最后其实h就是createElement的简写哦。

Hi 看这里!

大家好,我是PRO

我会陆续分享生活中的点点滴滴,当然不局限于技术。希望笔墨之中产生共鸣,每篇文章下面可以留言互动讨论。Tks bd!

博客分类

您可能感兴趣

作者推荐

呃,突然想说点啥

前端·博客

您的鼓励是我前进的动力---

使用微信扫描二维码完成支付