在 Vue 的 render 方法中 h 是什么意思?

翻译 科大大 ⋅ 于 2个月前 ⋅ 29812 阅读 ⋅ 原文地址

站点的翻译文章创建时,您将第一时间收到通知。

这是一篇社区协同翻译的文章,已完成翻译,更多信息请点击 协同翻译介绍

如果你已经使用 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>
  }
})
Ellison 翻译于 2个月前

查看其他 1 个版本

或许你想知道,h 是用来干嘛的?它表示什么意思呢? h 代表的是 hyperscript 。它是HTML的一部分,表示的是 超文本标记语言:当我们正在处理一个脚本的时候,在虚拟DOM节点中去使用它进行替换已成为一种惯例。这个定义同时也被运用到其他的框架文档中。详情点击这里 Cycle.js

在这个问题上,Evan 描述到:

Hyperscript 它本身表示的是"生成HTML结构的脚本"

缩写为 h 是因为它更容易去输入。 他还在 Frontend Masters 上描述了这一点 他的高级 Vue 研讨会

Everan 翻译于 2个月前

真的,你可以认为它是 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', {}, [...])
}
  1. 第一种是元素的类型(这里显示为 div)。
  2. 第二个是数据对象。 我们在这里主要包括:props, attrs, dom props, class 和 style.
  3. 第三个是一组子节点。 然后,我们将嵌套调用并最终返回一个虚拟 DOM 节点树。
Ellison 翻译于 2个月前

更深入的信息你可以在 Vue 指南 里找到。

名称 hyperscript 可能会让某些人感到困惑,因为 hyperscript 实际上是 一个库的名字(这些日子没有更新 ),它实际上有一个 小的生态系统。 在这种情况下,我们不是在谈论那个特定的实现。

希望能为那些感到困惑的人解决问题!

Ellison 翻译于 2个月前

原文地址:https://css-tricks.com/what-does-the-h-s...

译文地址:https://vuejscaff.com/topics/67/what-doe...


本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

文章译者

回复数量: 0
暂无回复~
您需要登陆以后才能留下评论!

Vue.js 官方中文文档

前端开发环境部署