# はじめに

このガイドは主に、Vue 3 の新機能と変更点について学びたい Vue 2 の経験があるユーザーを対象としています。 Vue 3 を試す前にこのガイドを上から下まで読む必要はありません。 多くの変更があったように見えますが、Vue についてあなたが知っていて愛していることの多くは同じままです。 しかし、私たちは可能な限り徹底し、文書化されたすべての変更について詳細な説明と例を提供したいと考えました。

• クイックスタート
• 注目すべき新機能
• 破壊的変更
• サポートライブラリ

# 概要

Vue Mastery (opens new window) で Vue 3 を学び始める。

# クイックスタート

• CDN 経由: <script src="https://unpkg.com/vue@next"></script>

• Codepen (opens new window) 上のブラウザ内プレイグラウンド

• CodeSandbox (opens new window) 上のブラウザ内サンドボックス

• Vite (opens new window) を使った Scaffold:

  npm init @vitejs/app hello-vue3 # OR yarn create @vitejs/app hello-vue3
  

  1
  

• vue-cli (opens new window) を使った Scaffold:

  npm install -g @vue/cli # OR yarn global add @vue/cli
  vue create hello-vue3
  # select vue 3 preset
  

  1
  2
  3
  

# 注目すべき新機能

Vue 3 で注目すべきいくつかの新機能の次のとおりです。

• Composition API
• Teleport
• Fragments
• Emits Component Option
• カスタムレンダラを作るための @vue/runtime-core の createRenderer API (opens new window)
• SFC での Composition API の Syntax Sugar (<script setup>) (opens new window) experimental
• SFC でのステートドリブンな CSS Variables (<style> の v-bind) (opens new window) experimental
• SFC での <style scoped> は、グローバルルールまたはスロットされたコンテンツのみを対象とするルールを含めることができるようになった (opens new window)
• Suspense experimental

# 破壊的変更

以下は、2.x からの破壊的変更の一覧です。:

# グローバル API

• グローバルな Vue API は、アプリケーションインスタンスを使用するように変更されました
• グローバル API と内部 API は、ツリーシェイキングが可能になるように再構築されました

# テンプレートディレクティブ

• コンポーネントでの v-model の使用方法が作り直され、 v-bind.sync が置き換えられました
• <templatev-for> ノードと非 v-for ノードでの key の使用法が変更されました
• 同じ要素で使用した場合の v-if と v-for の優先順位が変更されました
• v-bind="object" は順序依存(order-sensitive)になりました
• v-on:event.native 修飾子は削除されました
• v-for 内の ref は refs の配列を登録しなくなりました

# コンポーネント

• 関数コンポーネントは、単純な関数を使用してのみ作成可能になりました
• 単一ファイルコンポーネント (SFC) における functional 属性の <template> および functional コンポーネントオプションは非推奨になりました
• 非同期コンポーネントは、 defineAsyncComponent メソッドを使って作成することが必要になりました
• コンポーネントのイベントは、 emits で宣言できるようになりました

# Render 関数

• Render 関数の API が変更されました
• $scopedSlots プロパティが削除され、すべてのスロットが $slots を介して関数として公開されるようになりました
• $listeners は削除され、 $attrs にマージされました
• $attrs に class と style 属性が追加されました

# カスタム要素

• テンプレートのコンパイル中にカスタム要素のチェックが実行されるようになりました
• 特別な is prop の使用は、予約済みの <component> タグのみに制限されるようになりました

# その他の細かな変更

• destroyed ライフサイクルオプションの名前が unmounted に変更されました
• beforeDestroy ライフサイクルオプションの名前が beforeUnmount に変更されました
• Props の default ファクトリ関数は this コンテキストにアクセスできなくなりました
• コンポーネントライフサイクルに合わせてカスタムディレクティブ API が変更されました
• data オプションは常に関数として宣言されることが必要になりました
• ミックスインの data オプションは浅くマージされるようになりました
• 属性強制の戦略が変更されました
• 一部のトランジションクラスの名前が変更されました
• <TransitionGroup> はデフォルトでラッパー要素をレンダリングしなくなりました
• 配列を監視している場合、コールバックは配列が置き換えられたときにのみ発火されるようになりました。 ミューテーションで発火する必要がある場合は、 deep オプションを指定する必要があります。
• 特別なディレクティブ(v-if/else-if/else 、 v-for 、または v-slot）が使われていない <template> タグはプレーンな要素として扱われ、内部コンテンツをレンダリングする代わりにネイティブの <template> 要素となります。
• マウントされたアプリケーションは、マウント先の要素を置き換えなくなりました
• ライフサイクルの hook: イベントのプレフィックスは vnode- に変更されました

# 削除された API

• v-on の修飾子としての keyCode のサポート
• $on, $off そして $once のインスタンスメソッド
• Filters
• インラインテンプレート属性
• $children インスタンスプロパティ
• propsData オプション
• $destroy インスタンスメソッド。 ユーザーは、個々の Vue コンポーネントのライフサイクルを手動で管理べきではなくなりました。
• グローバル関数の set と delete、およびインスタンスメソッドの $set と $delete。これらはプロキシベースの変更検出では必要なくなりました。

# サポートライブラリ

現在、すべての公式ライブラリとツールが Vue 3 をサポートしていますが、中にはまだベータ版やリリース候補版のものもあります。それぞれのライブラリの詳細は以下のとおりです。ほとんどのライブラリは現在、 npm の next 配布 (dist) タグで配布されています。すべての公式ライブラリが互換性のある安定したバージョンになったら、 latest に変更する予定です。

# Vue CLI

v4.5.0 以降、 vue-cli は新しいプロジェクトを作成するときに、Vue 3 を選択するための組み込みオプションを提供するようになりました。 vue-cli をアップグレードし、 vue create を実行して、Vue3 プロジェクトを今すぐ作成できます。

• Documentation (opens new window)
• GitHub (opens new window)

# Vue Router

Vue Router 4.0 は Vue 3 のサポートを提供し、独自の破壊的変更がいくつかあります。 詳細については、移行ガイド (opens new window) を確認してください。

• Documentation (opens new window)
• GitHub (opens new window)
• RFCs (opens new window)

# Vuex

Vuex 4.0 は、3.x と大部分は同じ API で Vue3 のサポートを提供します。 唯一の破壊的変更は、プラグインのインストール方法 (opens new window)です。

• Documentation (opens new window)
• GitHub (opens new window)

# Devtools Extension

新しい UI を備え、複数の Vue のバージョンをサポートするために、内部処理にリファクタリングを施した新しいバージョンの Devtools を開発中です。 新しいバージョンは現在ベータ版であり、Vue 3 のみをサポートしています(現時点では)。 Vuex と Router の統合も進行中です。

• Chrome の場合: Chrome ウェブストアからインストール (opens new window)

  • 注：ベータチャネルは devtools の安定バージョンと競合する可能性があるため、ベータチャネルが正しく機能するには、安定バージョンを一時的に無効にする必要があるかもしれません。

• Firefox の場合: 署名された拡張機能をダウンロード (opens new window) (Assets の下の .xpi ファイル)

# IDE のサポート

VSCode (opens new window) を公式の拡張機能である Vetur (opens new window), とともに使用することをお勧めします。それにより Vue3 の包括的な IDE のサポートを得ることができます。

# その他のプロジェクト

Project	npm	Repo
@vue/babel-plugin-jsx	(opens new window)	[GitHub (opens new window)]
eslint-plugin-vue	(opens new window)	[GitHub (opens new window)]
@vue/test-utils	(opens new window)	[GitHub (opens new window)]
vue-class-component	(opens new window)	[GitHub (opens new window)]
vue-loader	(opens new window)	[GitHub (opens new window)]
rollup-plugin-vue	(opens new window)	[GitHub (opens new window)]