Vue 的 render 方法中 h 是什么？

红太狼 2020-06-22 15:03 800阅读 0赞

# Vue 的 render 方法中 h 是什么？

如果你接触过vue一段时间了，那么你可能会遇到过 `rendering` 方法在你的app文件中 -- 在最新版本的 `CLI`中它是一个默认值， 并且是在 `main.js`文件中:

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

或者是，如果你使用了 `render` 方法(函数)，可能会使用JSX:

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

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

在这个问题上，Evan 描述到：

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

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

真的，你可以认为它是 `createElement` 的缩写。 这将是一个长长的形式：

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

如果我们用 `h` 代替它，那么我们可以这样：

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

...然后可以通过使用 ES6 缩短：

```javascript
render: h => h (App)
```

Vue 版本最多需要三个参数：

```javascript
render(h) {
  return h('p', {}, [...])
}
```

- 第一种是元素的类型（这里显示为 p）。
- 第二个是数据对象。 我们在这里主要包括：props, attrs, dom props, class 和 style.
- 第三个是一组子节点。 然后，我们将嵌套调用并最终返回一个虚拟 DOM 节点树。

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，800人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js中的provide和inject方法是什么，有什么区别

Vue.js中的provide和inject方法在Vue.js中，provide和inject是用于父组件向子组件传递数据的一种技术。通过使用provide和injec

Love The Way You Lie/ 2024年03月16日 14:52/ 0 赞/ 6 阅读

相关 JavaScript中的方法是什么

> 作者：Shadeed > 译者：前端小智 > 来源：dmitripavlutin > 有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。 >

「爱情、让人受尽委屈。」/ 2023年01月17日 04:55/ 0 赞/ 126 阅读

相关 vue render中使用 class

梦开始：初代代码如下： // template { title: "操作", ali

àì夳堔傛蜴生んèń/ 2022年11月18日 10:54/ 0 赞/ 175 阅读

相关粗解Vue.js的render方法

Vue.js的render方法说明前注：版本限制： Vue.js 2.0+ 1.0无法使用没耐心，只关心有什么用的，想知道其大概是获取什么东西后生成的

左手的ㄟ右手/ 2022年07月12日 04:53/ 0 赞/ 126 阅读

相关 vue2.0 方法render

new Vue({ el:'one', //components: { App } vue2.0的写法 render: h =>

ゝ一世哀愁。/ 2022年04月16日 03:58/ 0 赞/ 190 阅读

相关 vue Render：h=>h(App) 解析

在学习VUE时，发现很多的组件的引入都是用ES6，需要在main.js中写入如下代码： export default () => { const rout

向右看齐/ 2022年04月11日 09:52/ 0 赞/ 151 阅读

相关 vue中的render函数介绍

简介：对于不了解slot的用法（参考：[大白话vue-slot的用法][vue-slot]）又刚接触render函数的同学来说，官网的解释无疑一脸懵逼，这里就整理下个人对ren

逃离我推掉我的手/ 2022年01月27日 20:47/ 0 赞/ 221 阅读

相关 Vue中import '@...'是什么

[Vue中import '@...'是什么][Vue_import _...] 今天看新项目代码，有import '@/assets/css/theme/index.cs

怼烎@/ 2021年11月14日 14:26/ 0 赞/ 456 阅读

相关 Vue 的 render 方法中 h 是什么？

Vue 的 render 方法中 h 是什么？如果你接触过vue一段时间了，那么你可能会遇到过 rendering 方法在你的app文件中 — 在最新版本的 CLI中它...

红太狼/ 2020年06月22日 15:03/ 0 赞/ 801 阅读

相关什么是h5

什么是h5 H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”...

小灰灰/ 2020年06月10日 13:38/ 0 赞/ 928 阅读