Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What is going on with this article?
@FumioNonaka

Vue CLI 3プロジェクトにおけるVueインスタンスの初期化を理解する

More than 1 year has passed since last update.

Vue CLI 3のプロジェクトでひな形をつくると、初期化を担うsrc/main.jsに、つぎのようなVueインスタンスをつくるコードが加わります。普通はとくに気にせず、触らなくて構いません。でも、やはり気になったので、少し調べました。

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

Vue.config.productionTip = false

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

うえのコードは、Vue.jsのなじみのある書き方にすると、つぎのようになるようです。

new Vue({
    el: '#app',
    // render: h => h(App),
    components: {App},
    template: '<App/>'
});  // .$mount('#app')

もっとも、実際にこう書き替えると、つぎのような警告が示されます。プロジェクトはランタイムのみのビルドを用いているため、テンプレートのコンパイルが通らないということです。予めテンプレートをコンパイルしておくか、コンパイラが含まれたビルドを使わなければなりません。

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

このテンプレートを動的につくるために使うのが描画関数render()です。たとえば、ページに<h1>要素とテキストを差し込むなら、つぎのようにrender()メソッドを定めます。引数にはDOMツリーをつくるための関数(createElement())が渡されます。その戻り値をrender()メソッドから返せばよいのです。

new Vue({
    // render: h => h(App),
    render(createElement) {
        return createElement('h1', 'hello world');
    }
}).$mount('#app')

けれど、関数でテンプレートをつくろうとすると、プロパティや入れ子要素など定めるものが多ければ、かなり面倒になります。そこで、引数として替わりに渡せるのが、単一ファイルコンポーネント(.vue)のインスタンスです。

はじめにみたVue CLIプロジェクトのJavaScriptコードは、つぎのように書き改めると、もう少しわかりやすいかもしれません。

new Vue({
    // render: h => h(App),
    render(createElement) {
        return createElement(App);
    }
}).$mount('#app')

なお、render()メソッドを使わずに、スプレッド構文Vueインスタンスを渡しても動きました(「When I should use render: h => h(App)?」参照)。

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

ところで、render()メソッドの引数をhとした理由が、Vue.jsのIssues「What does h mean?」で開発者のEvan You氏から明かされています。HTML構造をつくる"Hyperscript"の頭文字で、タイプもしやすいからとのことです(「Render Function API」参照)。

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

18
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
FumioNonaka
はなし家、もの書き、コード書き。詳しくはwebで。 担当講座: 電気通信大学ウェブシステムデザインプログラム「Web UI・UXプログラミング演習I・Ⅱ」 https://www.websys.edu.uec.ac.jp/ ロクナナワークショップ「Vue.js入門講座」 https://67.org/ws/workshop/detail/0136javascript.html

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
18
Help us understand the problem. What is going on with this article?