Zenn
🏋️‍♂️

Vue3についてザックリ纏めてみました

2022/10/16に公開
JavaScript
Vue.js
Vue 3
tech

はじめに

閲覧ありがとうございます。来月から実務デビューのyouです。

Vue3をサクッと学んだので、備忘録も兼ねてザックリ纏めていきたいと思います。

概要

Vue3はVue2と比べて何が大きく変わったのかというと、より大規模なアプリケーション開発に対応したことになります。

具体的に言うと...

  • 必要な機能だけをimportして使用するため、容量の削減と処理の高速化を実現
  • Provide/Injectという長距離propsの実装
  • 従来のOptionsAPIに代わるCompositionAPIの実装により、可読性の上昇
  • TypeScriptサポートの改善

以上、4点が大きなアップデートではないでしょうか。

それぞれリファレンスのサンプルコードを使用しながら解説していきます！
※TypeScript学習中なので、4番目については後程追記いたします。

必要な機能だけをimportする

今回はVueのエントリーポイントであるmain.jsを例にしますが、Vue2までは下記import Vue from 'vue'のように、全てのVueファイルを読み込んでいました。

main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

この記述方法は開発者からしたら楽ですが、処理速度と容量が増加してしまう点から大規模になるほどユーザビリティが低下していくことが考えられます。

よって、Vue3から採用されたのが使用する機能だけをimportする方法です。
エントリーポイントであるmain.jsが下記のようになります。

main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

import Vue from 'vue'からimport { createApp } from 'vue'となっていますね。
これで必要な分だけ読み込めるので、容量の削減と処理の高速化を実現することが出来る訳です！

何か既視感があると思ったら、Firebaseがv8からv9になったときと同じですね笑

長距離propsのProvide/Inject

Vue2は親コンポーネントから孫コンポーネントからデータを受け渡すときに、下記図のように一つずつ行う必要があります。

コンポーネントが少ない間は問題ありませんが、多くなってくると状態管理が難しくなります。
そこで実装されたのが、長距離propsのProvide/Injectになります。

Provide/Injectを使用すると、下記図のようにコンポーネントの血縁関係が一致していれば、子コンポーネントを無視して孫コンポーネントまでデータを受け渡すことが出来るようになります。

個人開発であれば使うことは無さそうですが、実務となれば必須となりそうですね...！
コードの書き方に関しては公式のリファレンスを参考にして下さい。

CompositionAPIについて

従来のOptionsAPIは、data、methods、computed、mountedのように役割毎に処理が分かれていました。

それに対し、CompositionAPIは処理毎に纏めて書くことが可能になり、コードの可読性が上昇しました。

CompositionAPIを使うためにはsetup関数(合成関数)を使用します。
簡単なサンプルコードを作ってみたので、CompositionAPIを体験してみてください。

HomeView.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <br />
    {{ multiply }}
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import { computed, ref } from 'vue';

export default {
  name: 'HomeView',
  components: {
    HelloWorld,
  },
  setup() {
    const count = ref(0);
    const multiply = computed(() => count.value * 2);
    return { count, multiply };
  },
};
</script>

上記はVueCLIで生成されるHomeView.vueを弄っただけになります。

簡単に解説すると、const countがdata()、const multiplyがcomputed()でcountの値が変わったのを検知して、計算し直すというコードになっております。

また、countにあるref()は、setup関数内でデータをリアクティブにするためのものになります。

VueDevToolsで見てみると...

赤枠にある通り、HomeViewにsetupという箇所が追加されています。

countがリアクティブになっているので、値を変更すると...

期待通りの動作になりました。

今回はコード量が少ないため真価を発揮出来ていませんが、このようにCompositionAPIは処理毎に纏めて書けるのが理解出来たかと思います。

おわりに

如何でしたでしょうか。
ザックリにはなりましたが、以上が解説になります。

まだまだ使い熟せる気はしませんが、今後より深くまで理解出来たら追加の記事でも作ろうと思います笑
来月の実務で使えると良いなぁ...。

それでは良いエンジニアライフを。

Discussion