Vue 渲染方法中的“h”代表什么？

如果您使用 Vue 一段时间了，您可能遇到过这种渲染应用程序的方式——这是最新版本 CLI 中的默认方式，位于 main.js 中

new Vue({
 render: h => h(App)
}).$mount('#app')

或者，如果您使用渲染函数，可能是为了利用 JSX

Vue.component('jsx-example', {
  render (h) {
    return <div id="foo">bar</div>
  }
})

您可能想知道，h 是做什么的？它代表什么？ h 代表 **hyperscript**。它是 HTML 的一种变体，HTML 代表超文本标记语言：由于我们正在处理脚本，因此在虚拟 DOM 实现中使用这种替换已成为惯例。此定义也出现在其他框架的文档中。例如，在 Cycle.js 中就是这样。

在这个问题中，Evan 描述道

Hyperscript 本身代表“生成 HTML 结构的脚本”

它被缩写为 h，因为更容易输入。他还在 Frontend Masters 上的高级 Vue 工作坊中对其进行了更详细的描述。

实际上，您可以将其视为 createElement 的简写。以下是完整形式

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

如果我们将其替换为 h，则首先得到

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

…然后可以使用 ES6 缩写为

render: h => h (App)

Vue 版本最多可以接受三个参数

render(h) {
  return h('div', {}, [...])
}

第一个是元素的类型（此处显示为 div）。
第二个是数据对象。我们在这里嵌套一些字段，包括：props、attrs、dom props、class 和 style。
第三个是子节点数组。然后我们将进行嵌套调用，并最终返回一个虚拟 DOM 节点的树。

在 Vue 指南此处中有更深入的信息。

名称 **hyperscript** 可能会让某些人感到困惑，因为 hyperscript 实际上是一个库的名称（这些天没有更新），它实际上有一个小型生态系统。在这种情况下，我们并不是在谈论那个特定的实现。

希望这能为那些好奇的人澄清一些事情！

Michael E McGuire

# 2018年5月30日

这种风格比我使用的风格有什么优势吗？我在示例中见过“render (h) 风格，但在我在生产环境中使用的任何代码中都没有见过。

main.js

new Vue({
  el: '#app',
  data() {
      return {
      }
  },
  router,
  store,
  components: { App },
  template: '<App/>'
})

以及在组件中

    export default {
        name: 'main',
        computed: mapState([
        ]),         
        data () {
            return {
            }
        },
        mounted: function(){
        },
        methods: {
        }               
    }

Stephen

评论永久链接# 2018年6月5日

h() 方式允许您以编程方式控制渲染。基本上，如果您需要更精细的控制或需要为大量用户扩展 Vue.js 视图/应用程序，则这是一个低级选项。它是一种优化。

您显示的代码是标准方式（Vue.js 文档最初教授的方式），对于非程序员来说更容易阅读。

Evan You 希望 Vue.js 能够被许多用户接受，但也希望为希望获得更多控制权的开发人员提供功能。

Simon Buerger

# 2018年5月30日

为什么要费心缩写它。它只会造成混淆。在代码中尽可能保持变量/参数名称清晰，并让您的构建过程在生产环境中为您节省字节

Tim (@timothyjellison)

评论永久链接# 2018年5月31日

这是最新版本 CLI 中的默认值

名称 hyperscript 可能会让某些人感到困惑，因为 hyperscript 实际上是一个库的名称

外面的世界很混乱。这就是生活，伙计。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。