render: h => h(App)
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
})
<template>
<div>
...
</div>
</template>
<script>
export default {
}
</script>
<style>
...
</style>
何となく使ってたけど、render: h => h(App)
って何だろう。
描画関数
公式ドキュメントによると、以下のようなtemplate
レンダリングへの代替とのこと。
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