Vue.jsのrender: h => h(App)について調べた

render: h => h(App)

src/index.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
})

src/App.vue

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {

}
</script>

<style>
  ...
</style>

何となく使ってたけど、render: h => h(App)って何だろう。

描画関数

描画関数とJSX — Vue.js

公式ドキュメントによると、以下のようなtemplateレンダリングへの代替とのこと。

src/index.js

import Vue from 'vue';
import App from './App.vue';

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

render関数の使い方として、次のようなものが紹介されている。

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

この関数は、以下と同じように描画される。

<h1>{{ blogTitle }}</h1>

改めてrender: h => h(App)を見てみる

Explanation for render: h => h(App) please

公式のissueにドンピシャなものがあった。

これが...

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

こうなって...

render (createElement) {
  return createElement(App)
}

短くなって...

render (h) {
  return h(App)
}

こうなる。

render: h => h(App)

ちなみに、hというエイリアスはhyperscriptから来ており、仮想DOMの実装でよく使われるらしい。

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".

参考

描画関数とJSX — Vue.js
Vue.js 2.0 の render について試してみた
( ᐛ )σ「render: h => h(App) 」
Explanation for render: h => h(App) please