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

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

環境

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

概要

  • 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プロジェクトの作成

インストール | Vue.js
Vue.js - The Progressive JavaScript Framework

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

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

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

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

使用するソースコード

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

GitHub - masayan1126/vue3-tutorial
Contribute to masayan1126/vue3-tutorial development by creating an account on GitHub.

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

コンポーネントの種類

  • 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
    • 複数指定可能に
v-model | Vue.js
Vue.js - The Progressive JavaScript Framework
      • プロパティとイベントのデフォルト名が変更
v-model | Vue.js
Vue.js - The Progressive JavaScript Framework
          • プロパティ: value -> modelValue
          • イベント: input -> update:modelValue
  • ライフサイクルフック
    • destroyedがunmounted(コンポーネントが破棄された後)に、beforeDestroy(コンポーネントが破棄される前)がbeforeUnmountに変更
  • emit
emits オプション | Vue.js
Vue.js - The Progressive JavaScript Framework
    • setupの第2引数でcontextを受け取り、context.emit(“hoge”, param1, param2…)の形式
  •  mixinの非推奨
    • 主な理由
      • 名前衝突の可能性
      • コードの読みづらさ
    • 代わりにComposition API functionsが推奨される
Custom Composable Methods with Vue 3 - This Dot Labs
Introduction One of the greatest strenghts of modern Javascript frameworks is the ability to reuse components. Components (especially Vue's single-file…
      • React Hooksのようなイメージ
      • ある機能単位で関数を定義(useHogeFunctionのような形式)し、その関数内にリアクティブな値や、その値を使用した関数等を定義しそれをreturnで返して、useHogeFunction自体をexportする。呼び出し側はuseHogeFunctionを実行してオブジェクトの分割代入で使用する値や関数を定義して利用する
  • Fragments
Fragments | Vue.js
Vue.js - The Progressive JavaScript Framework
  • VS Codeの機能拡張の刷新
    • VeturからVolarが推奨に
      • Volarでは、<script setup>のような新しい記法への対応が実装されている
  • 状態管理ライブラリPinia(ピニア?)の登場

Vue学習におすすめの書籍

独習Python/山田祥寛【3000円以上送料無料】
bookfan 1号店 楽天市場店
¥ 3,300(2022/02/05 17:20時点)
タイトルとURLをコピーしました