Masayan tech blog.

  1. ブログ記事一覧>
  2. 【初学者向け】Vue3の主な特徴まとめ

【初学者向け】Vue3の主な特徴まとめ

公開日

環境

  • macOS Monterey 12.0.1
  • VSCode
  • npm 6.14.8
  • vue 3.2.25

概要

こちらの内容はYouTube動画もあります。

  • JavaScriptのフレームワーク
  • vue3でもvue2の技法は可能??
    • 可能

3にしたら何が嬉しい??

  • パフォーマンス向上
    • Vue自体のソースコードの容量が約半分になり、より軽量に
  • 処理速度の向上
    • 仮想DOMによる描画ロジックの見直しにより大幅に向上
  • CLIツールの変化
    • Vue CLIからより高速に動作するViteベースの新たなCLIツールへ
    • 後述する
  • TypeScript利用時のサポート強化
    • vue3自体がTypeScriptベースで書き直されたため、型推論が強化された
    • もちろん、Jsでも可
  • Compositon API
    • vue2のフレームワークライクな記述はOptions API(インスタンス生成時に、data、computed、methodsといった宣言をオプションパラメータとして指定する書き方)と呼ばれ、vue3からは新しい記述方法である「Composition API」が登場
    • Options APIと併用可能
    • オプション(dataやmethods)ごとの記述からロジックごとの記述に
    • 保守性・再利用性が向上する
    • フレームワークからライブラリ(素のJsライクに)

vue3プロジェクトの作成

https://v3.ja.vuejs.org/guide/installation.html#vite

任意のディレクトリで以下を実行

npm init vite@latest <プロジェクト名> --template vue

cd <プロジェクト名>
npm install && npm run dev

ブラウザからlocalhost:3000にアクセスするとVueのトップページが表示されます

使用するソースコード

以下の公開リポジトリに置いています

※npmは使用できるようにしておいてください。

クローン後、プロジェクトディレクトリに移動し、依存関係のインストールと、ビルドを行ってください

cd <プロジェクト名>

npm install && npm run dev

コンポーネントの種類

  • src/App.vue
    • エントリーポイント(トップレベルのコンポーネント)
  • src/components/Modal.vue
    • レシピを登録するモーダル(composition api)
  • src/components/Modal2.vue
    • レシピを登録するモーダル(options api)
  • src/components/TextInput.vue
    • モーダル内で使用するテキストフィールド用のコンポーネント
  • src/components/RecipeList.vue
    • レシピの一覧を表示するコンポーネント

Compositon API

  • setup構文
    • vue2ではdataやmethods、computed、watch等で記述するブロックが決められていたが(Options API)、vue3では全てsetup内に記述することが可能
    • setupはbeforeCreate(インスタンスの初期化のタイミング)の前に実行されるので、setup内からthisでインスタンスのデータにアクセス不可
    • setup内で定義した値をtemplateで使用したい場合やcomputedやmethod内で参照したい値(従来のthis)はreturnで返す必要がある
  • reactive性
    • ある値Aが依存している値Bが変更された場合に値Aも更新される特性のこと
    • リアクティブシステムの監視下に置かれているデータのことを「リアクティブデータ」という
    • vue2では、リアクティブな状態の宣言方法として、data()が使用されていたが、Vue3ではrefあるいはreactiveを使用する
    • 例えば、あるリストの配列がユーザーの登録処理で追加された場合、画面描画(DOM)を書き換えてほしい等
    • vue3ではrefまたはreactiveを使用する
      • ref
        • プリミティブ値(文字列・数値など) で使用する
        • refを使ってリアクティブにした値にアクセスする場合は、hoge.valueの形でアクセスする必要がある
          • template内で使用する際はvalueは不要
      • reactive
        • オブジェクトのみ指定可能
  • data、method、computed、watch、propsそれぞれの書き方の変化
    • data
      • 上述の通り、refやreactiveを使用する
    • method
      • Js(Ts)の関数宣言をし、returnで返す
    • computed
      • 特に大きな変化はなし
    • watch
      • 特に大きな変化はなし
    • props
      • setup()の第1引数にpropsを指定する
  • setupの書き方には以下の2種類がある
    • setup()
    • <script setup>
      • templateとscriptタグが上下逆になる
      • setup()が不要
      • defineProps、defineEmitsやdefineExposeでscriptタグ内に定義する

その他変更点

  • インスタンス定義の仕方
    • new Vue から createApp
  • v-model
    • 複数指定可能に

https://v3.ja.vuejs.org/guide/migration/v-model.html#_3-x-%E3%81%A6%E3%82%99%E3%81%AE%E6%A7%8B%E6%96%87

  • プロパティとイベントのデフォルト名が変更

https://v3.ja.vuejs.org/guide/migration/v-model.html#v-model

  • プロパティ: value -> modelValue
    • イベント: input -> update:modelValue
  • ライフサイクルフック
    • destroyedがunmounted(コンポーネントが破棄された後)に、beforeDestroy(コンポーネントが破棄される前)がbeforeUnmountに変更
  • emit

https://v3.ja.vuejs.org/guide/migration/emits-option.html#emits-%E3%82%AA%E3%83%95%E3%82%9A%E3%82%B7%E3%83%A7%E3%83%B3

  • setupの第2引数でcontextを受け取り、context.emit("hoge", param1, param2...)の形式
  •  mixinの非推奨
    • 主な理由
      • 名前衝突の可能性
      • コードの読みづらさ
    • 代わりにComposition API functionsが推奨される

https://www.thisdot.co/blog/custom-composable-methods-with-vue-3#example---weight-conversion

  • React Hooksのようなイメージ
    • ある機能単位で関数を定義(useHogeFunctionのような形式)し、その関数内にリアクティブな値や、その値を使用した関数等を定義しそれをreturnで返して、useHogeFunction自体をexportする。呼び出し側はuseHogeFunctionを実行してオブジェクトの分割代入で使用する値や関数を定義して利用する
  • Fragments

https://v3.ja.vuejs.org/guide/migration/fragments.html#fragments

  • VS Codeの機能拡張の刷新
    • VeturからVolarが推奨に
      • Volarでは、<script setup>のような新しい記法への対応が実装されている
  • 状態管理ライブラリPinia(ピニア)の登場

まとめ

いかがでしたでしょうか。本記事では、初学者向けにVue3の主な特徴まとめについて紹介しています。Vue2からの変更点を中心に説明しながら実際のコードを用いてわかりやすく説明していますので、ぜひ学習に役立てていただければと思います。