# はじめに

INFO

Vue.js を使うのは初めてですか？エッセンシャルガイドを参考に使い始めてみてください。

このガイドは主に、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 vite-app hello-vue3 # OR yarn create vite-app hello-vue3

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 で注目すべきいくつかの新機能の次のとおりです。

# 破壊的変更

INFO

Vue 2 と互換性のある動作と、互換性のない使用法に対する実行時警告を備えた Vue 3 の移行専用ビルドの開発に取り組んでいます。重要な Vue 2 アプリの移行を計画している場合は、よりスムーズな体験のために移行ビルドを待つことを強くお勧めします。

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

# グローバル API

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

# コンポーネント

# Render 関数

# カスタム要素

# その他の細かな変更

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

# 削除された API

v-on の修飾子としての keyCode のサポート
$on, $off そして $once のインスタンスメソッド
Filters
インラインテンプレート属性
$destroy インスタンスメソッド。ユーザーは、個々の Vue コンポーネントのライフサイクルを手動で管理べきではなくなりました。

# サポートライブラリ

現在、すべての公式ライブラリとツールが Vue 3 をサポートしていますが、それらのほとんどはまだベータ版であり、NPM の next 配布 (dist) タグで配布されています。 2020 年末までにすべてのプロジェクトを安定させて latest 配布タグを使用するように切り替える予定です。

# Vue CLI

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

# Vue Router

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

# Vuex

Vuex 4.0 は、3.x と大部分は同じ API で Vue3 のサポートを提供します。唯一の破壊的変更は、プラグインのインストール方法 (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)]

← リソース v-forのref配列 →