287
167

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-25

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

287
167
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
287
167

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?