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

刚开始学Vue,再看别人的例子时经常会看到

render: h => h(App)

这样一行代码,但是有的例子也没有这行代码也运行正常。去官方看文档 找到render function 没有太理解,求大神讲解这行代码的作用和为什么要这样做。谢谢!

阅读 74.1k
评论 2016-10-11 提问
    10 个回答

    => 是ES6的箭头语法

    // ES5  
    (function (h) {  
      return h(App);  
    });  
      
    // ES6  
    h => h(App); 
    

    [官方文档][1]

    render: function (createElement) {
        return createElement(
          'h' + this.level,   // tag name 标签名称
          this.$slots.default // 子组件中的阵列
        )
      }
    
    评论 赞赏

      为了方便仍然有疑惑的人,贴一个链接, 其中 @bjunc 的解答可以作为该题的完美回答;

      大概的翻译下:
      render: h => h(App) 是下面内容的缩写:

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

      进一步缩写为(ES6 语法):

      render (createElement) {
          return createElement(App);
      }

      再进一步缩写为:

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

      按照 ES6 箭头函数的写法,就得到了:

      render: h => h(App);

      其中 根据 Vue.js 作者 Even You 的回复,h 的含义如下:

      It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".

      它来自单词 hyperscript,这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指
      生成HTML 结构的 script 脚本,因为 HTML 是 hyper-text markup language 的缩写(超文本标记语言)

      个人理解:createElement 函数是用来生成 HTML DOM 元素的,也就是上文中的 generate HTML structures,也就是 Hyperscript,这样作者才把 createElement 简写成 h。

      评论 赞赏

        这是Vue 2.0新增的函数,可以直接给绑定节点渲染一个vue组件,如果在Vue 1.x下,就应该使用

        new Vue({
            el: '#app',
            components: { App }
        });

        然后在页面中写入标记:

        <div id="app">
            <app></app>
        </div>
        评论 赞赏

          // 写法1:

          import App from './App'
          new Vue({
              el: '#root',
              render: h => h(App)
          })
          

          // 写法2:

          import App from './App'
          new Vue({
              el: '#root',
              template: '<App></App>',
              components: {
                  App
              }
          })
          

          上面两种的效果是一样的,可以看出 h(App)函数 的作用是:使用App作为这个Vue实例的template(同时一并了注册App组件)

          以上个人见解,有错误望指正

          评论 赞赏

            将h作为createElement的别名是一个通用惯例

            评论 赞赏
              qiulang
              • 3
              • 新人请关照

              理解要点是 当只有一个参数的时候()可以省略;当函数体只有一句话{}可以省略,所以 render: (h) => {h(App)};就变成 render: h => h(App);

              评论 赞赏
                诺曼底
                • 2
                • 新人请关照

                vue.js 有一行代码
                var h = function (a, b, c, d) { return createElement(_context, a, b, c, d, true); };

                评论 赞赏

                  官方文档-render-function中所提及

                  将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中 h 失去作用, 在应用中会触发报错。

                  render: h => h(App)

                  你可以将上述代码看做为

                  render: function (createElement){
                      return createElement(app);
                  }

                  可见,在vuejs中,h函数仅是作为createElement函数之缩写

                  该答案已被忽略,原因:

                  评论 赞赏

                    请问 h 具体指 哪个单词的缩写?

                    该答案已被忽略,原因:

                    评论 赞赏
                      Aresn
                      • 11.4k

                      该答案已被忽略,原因:不符合答题规范 - 内容不是答案,可用评论、投票替代

                      评论 赞赏
                        撰写回答

                        登录后参与交流、获取后续更新提醒