やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > vue.js > vue.jsのrender()を使う

vue.jsのrender()を使う

vue.js JavaScript

　ドキュメントの最初で見てから気になってたので。

成果物

render()ってなんぞ？

　Vue.jsの最初に読むドキュメントで真っ先に見かけたコードが以下だ。

// これはコンパイラが必要です
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// これはコンパイラ不要です
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

　テンプレートって何？　コンパイルって何？　などという疑問はある。しかしそれらは置いておく。

　ここで注目するのはrender()だ。なんぞこれ？　さらに内容をみるとVue.h()という謎のメソッドも使っている。ずっと気になっていた。しかしドキュメントの次の項からはもう使われていなかった。なので知る機会もなくモヤってた。

render()

  • render(): 返した仮想ノードを描画する。

Vue.h()

  • h(): 仮想ノードを返す。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="../vue.3.0.5.js"></script>
    <script src="./main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

const opt = {
    render() {
        return Vue.h('span', 'メッセージ');
    }
}
Vue.createApp(opt).mount('#app');

　リアクティブを使うことで変数にできる。

const opt = {
    setup() {
        const message = Vue.ref('描画するメッセージです。');
        return { message };
    },
    render() {
        return Vue.h('span', this.message);
    }
}
Vue.createApp(opt).mount('#app');

所感

　ふーん。こーゆーもんなんだ。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux