Merge pull request #398 from t0yohei/add-migration-build

Author: naokie

src/.vuepress/config.js

@@ -172,6 +172,7 @@ const sidebar = {
   ],
   migration: [
     '/guide/migration/introduction',
+    '/guide/migration/migration-build',
     {
       title: '詳細',
       collapsable: false,

src/guide/migration/array-refs.md

@@ -69,4 +69,11 @@ export default {
 
 - `itemRefs` は配列である必要はありません。 反復キーで参照できるオブジェクトでも構いません。
 
-- これにより、必要に応じて `itemRefs` をリアクティブにして監視することもできます。
+- これにより、必要に応じて `itemRefs` をリアクティブにして監視することもできます。
+
+## 移行の戦略
+
+[移行ビルドのフラグ:](migration-build.html#compat-の設定)
+
+- `V_FOR_REF`
+- `COMPILER_V_FOR_REF`

src/guide/migration/async-components.md

@@ -95,3 +95,4 @@ const asyncComponent = defineAsyncComponent(
 非同期コンポーネントの使い方のさらなる情報は、以下を見てください:
 
 - [ガイド: 動的 & 非同期コンポーネント](/guide/component-dynamic-async.html#動的コンポーネントにおける-keep-alive-の利用)
+- [移行ビルドのフラグ: `COMPONENT_ASYNC`](migration-build.html#compat-の設定)

src/guide/migration/attribute-coercion.md

@@ -125,7 +125,7 @@ badges:
       <td><code>"false"</code></td>
     </tr>
     <tr>
-      <td rowspan="2">その他の非ブール属性<br><small>例えば 
+      <td rowspan="2">その他の非ブール属性<br><small>例えば
       <code>aria-checked</code>、<code>tabindex</code>、<code>alt</code>など</small></td>
       <td><code>undefined</code>, <code>null</code>, <code>false</code></td>
       <td><code>undefined</code>, <code>null</code></td>
@@ -138,3 +138,8 @@ badges:
     </tr>
   </tbody>
 </table>
+
+[移行ビルドのフラグ:](migration-build.html#compat-の設定)
+
+- `ATTR_FALSE_VALUE`
+- `ATTR_ENUMERATED_COERSION`

src/guide/migration/attrs-includes-class-style.md

@@ -60,6 +60,8 @@ export default {
 
 `inheritAttrs: false` を使用しているコンポーネントでは、スタイルの適用が意図したとおりに動作することを確認してください。もし以前に `class` や `style` の特別な動作に依存していた場合、これらの属性が別の要素に適用されている可能性があるため、一部の見た目が崩れている可能性があります。
 
+[移行ビルドのフラグ: `INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#compat-の設定)
+
 ## 参照
 
 - [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)

src/guide/migration/children.md

@@ -38,3 +38,7 @@ export default {
 ## 3.x の更新
 
 3.x では、 `$children` プロパティが削除され、サポートされなくなりました。代わりに、もし子コンポーネントのインスタンスにアクセスする必要がある場合は、 [$refs](/guide/component-template-refs.html#template-refs) を使用することをお勧めします。
+
+## 移行の戦略
+
+[移行ビルドのフラグ: `INSTANCE_CHILDREN`](migration-build.html#compat-の設定)

src/guide/migration/custom-directives.md

@@ -37,7 +37,6 @@ Vue.directive('highlight', {
 
 ## 3.x での構文
 
-
 ただし、Vue 3 では、カスタムディレクティブ用のよりまとまりのある API を作成しました。Vue 2 では、似たようなイベントにフックしているにもかかわらず、コンポーネントのライフサイクルメソッドとは大きく異なります。これらを次のように統合しました。
 
 - **created** - 追加されました! これは、要素の属性やイベントリスナーが適用される前に呼び出されます。
@@ -104,3 +103,7 @@ mounted(el, binding, vnode) {
 :::warning
 [fragments](/guide/migration/fragments.html#overview) のサポートにより、コンポーネントは複数のルートノードを持つ可能性があります。マルチルートコンポーネントに適用すると、カスタムディレクティブは無視され、警告がログ出力されます。
 :::
+
+## 移行の戦略
+
+[移行ビルドのフラグ: `CUSTOM_DIR`](migration-build.html#compat-の設定)

src/guide/migration/custom-elements-interop.md

@@ -96,6 +96,8 @@ Vue では、ブラウザで普遍的に利用できるようになる前のネ
     document.createElement('button', { is: 'plastic-button' })
     ```
 
+[移行ビルドのフラグ: `COMPILER_IS_ON_ELEMENT`](migration-build.html#compat-の設定)
+
 ## `v-is` は In-DOM テンプレートパースのための回避策
 
 > 注: このセクションは、Vue テンプレートがページの HTML に直接記述されている場合にのみ影響します。

src/guide/migration/data-option.md

@@ -111,6 +111,8 @@ Vue 2.x での `$data` の結果は:
 }
 ```
 
+[移行ビルドのフラグ: `OPTIONS_DATA_FN`](migration-build.html#compat-の設定)
+
 ## 移行の戦略
 
 オブジェクト宣言を利用しているユーザーには以下を推奨します:
@@ -119,3 +121,8 @@ Vue 2.x での `$data` の結果は:
 - 共有データへの参照、新しい共有オブジェクトを指すようにを書き換える
 
 ミックスインのディープマージに依存しているユーザーには、そのような依存を完全に避けるためにコードをリファクタリングすることをお勧めします。ミックスインのディープマージは非常に暗黙的であり、コードロジックの理解やデバッグがより難しくなる可能性があります。
+
+[移行ビルドのフラグ:](migration-build.html#compat-の設定)
+
+- `OPTIONS_DATA_FN`
+- `OPTIONS_DATA_MERGE`

src/guide/migration/events-api.md

@@ -79,3 +79,5 @@ export default {
 これは Vue 2 と同じような Event Emitter API を提供します。
 
 これらのメソッドは、Vue 3 の将来の互換ビルドでもサポートされる可能性があります。
+
+[移行ビルドのフラグ: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-の設定)

src/guide/migration/filters.md

@@ -73,6 +73,11 @@ badges:
 
 フィルタを使う代わりに、算出プロパティか関数に置き換えることを推奨します。
 
+[移行ビルドのフラグ:](migration-build.html#compat-の設定)
+
+- `FILTERS`
+- `COMPILER_FILTERS`
+
 ### グローバルフィルタ
 
 もし、グローバルにフィルタを登録していて、そしてアプリケーション全体でそのフィルタを使用している場合、そのフィルタを個々のコンポーネントで算出プロパティやメソッドに置き換えるのは不便でしょう。

src/guide/migration/functional-components.md

@@ -117,3 +117,4 @@ export default {
 
 - [移行: Render 関数](/guide/migration/render-function-api.html)
 - [ガイド: Render 関数](/guide/render-function.html)
+- [移行ビルドのフラグ: `COMPONENT_FUNCTIONAL`](migration-build.html#compat-の設定)

src/guide/migration/global-api.md

@@ -85,6 +85,7 @@ const app = createApp({})
 | Vue.mixin                  | app.mixin                                                                                        |
 | Vue.use                    | app.use ([以下を参照](#a-note-for-plugin-authors))                                               |
 | Vue.prototype              | app.config.globalProperties ([以下を参照](#vue-prototype-replaced-by-config-globalproperties))   |
+| Vue.extend                 | _削除_ ([以下を参照](#vue-extend-replaced-by-definecomponent))                                   |
 
 グローバルに振る舞いを変更しないその他のグローバル API は [グローバル API の Treeshaking](./global-api-treeshaking.html) にあるように、名前付きエクスポートになりました。
 
@@ -94,6 +95,8 @@ Vue 3.x では "use production build" のヒントは、"dev + full build" (ラ
 
 ES Modules ビルドでは、モジュールバンドラーと一緒に使用されていることと、ほとんどの場合 CLI やボイラープレートで本番環境が適切に設定されているため、このヒントは表示されなくなりました。
 
+[移行ビルドのフラグ: `CONFIG_PRODUCTION_TIP`](migration-build.html#compat-の設定)
+
 ### `config.ignoredElements` は `config.isCustomElement` に変更
 
 この設定オプションはネイティブのカスタム要素をサポートする意図で導入されたため、それがわかるように名前に変更しました。新しいオプションでは、以前の 文字列 / RegExp の方法より、柔軟な方法を提供する関数を期待します。
@@ -115,6 +118,8 @@ Vue 3 では、要素がコンポーネントであるかどうかのチェッ
 - これは、Vue CLI 設定の新しいトップレベルのオプションになります。
 :::
 
+[移行ビルドのフラグ: `CONFIG_IGNORED_ELEMENTS`](migration-build.html#compat-の設定)
+
 ### `Vue.prototype` は `config.globalProperties` と置換
 
 Vue 2 では、すべてのコンポーネントでアクセス可能なプロパティを追加するために、 `Vue.prototype` がよく使われていました。
@@ -134,6 +139,58 @@ app.config.globalProperties.$http = () => {}
 
 また `globalProperties` の代わりに `provide` ([後述](#provide-inject)) を使うことも考えられます。
 
+[移行ビルドのフラグ: `GLOBAL_PROTOTYPE`](migration-build.html#compat-の設定)
+
+### `Vue.extend` の削除
+
+Vue 2.x では、`Vue.extend`を使って、コンポーネントのオプションを含むオブジェクトを引数に、Vue のベースコンストラクタの「サブクラス」を作成していました。Vue 3.x では、コンポーネントコンストラクタの概念はもうありません。コンポーネントのマウントには、常に `createApp` グローバル API を使用する必要があります。
+
+```js
+// 以前 - Vue 2
+
+// コンストラクタの作成
+const Profile = Vue.extend({
+  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
+  data() {
+    return {
+      firstName: 'Walter',
+      lastName: 'White',
+      alias: 'Heisenberg'
+    }
+  }
+})
+// Profile のインスタンスを作成し、それを要素にマウントする
+new Profile().$mount('#mount-point')
+```
+
+```js
+// 今後 - Vue 3
+const Profile = {
+  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
+  data() {
+    return {
+      firstName: 'Walter',
+      lastName: 'White',
+      alias: 'Heisenberg'
+    }
+  }
+}
+
+Vue.createApp(Profile).mount('#mount-point')
+```
+
+#### 型推論
+
+Vue 2 では、`Vue.extend`は、コンポーネントのオプションに TypeScript の型推論を提供するためにも使われていました。Vue 3 では、同じ目的のために、`defineComponent`グローバル API を`Vue.extend`の代わりに使用することができます。
+
+なお、`defineComponent`の戻り値の型はコンストラクタのような型ですが、これは TSX の推論にのみ使用されます。実行時には、`defineComponent`はほとんど何もせず、オプションオブジェクトをそのまま返します。
+
+#### コンポーネントの継承
+
+Vue 3 では継承やミックスインよりも、 [Composition API](/api/composition-api.html) によるコンポジションを強く推奨しています。 何らかの理由でコンポーネントの継承が必要な場合は、`Vue.extend` の代わりに [`extends` オプション](/api/options-composition.html#extends) を使用することができます。
+
+[移行ビルドのフラグ: `GLOBAL_EXTEND`](migration-build.html#compat-の設定)
+
 ### プラグイン作者へのノート
 
 プラグイン作者の一般的なプラクティスとして、`Vue.use` を使ってプラグインを自動的に UMD ビルドにインストールさせるものがありました。例えば、公式の `vue-router` プラグインのブラウザ環境へのインストールは以下のようになっていました:
@@ -187,6 +244,8 @@ app.directive('focus', {
 app.mount('#app')
 ```
 
+[移行ビルドのフラグ: `GLOBAL_MOUNT`](migration-build.html#compat-の設定)
+
 ## Provide / Inject
 
 Vue 2.x のルートインスタンスで `provide` オプションを使用するのとどうように、Vue 3 のアプリケーションインスタンスでも、アプリケーション内の任意のコンポーネントに注入できる依存関係を提供できます:

src/guide/migration/inline-template-attribute.md

@@ -30,6 +30,8 @@ Vue 2.x では子コンポーネントの内部のコンテンツを分散コン
 
 `inline-template` のユースケースの多くでは、すべてのテンプレートが HTML ページ内に直接書かれるようなビルドツールを使わないセットアップを想定しています。
 
+[移行ビルドのフラグ: `COMPILER_INLINE_TEMPLATE`](migration-build.html#compat-の設定)
+
 ### オプション #1: `<script>` タグを使う
 
 このような場合の最も簡単な回避策は、`<script>` を代替として使うことです:

src/guide/migration/introduction.md

@@ -7,7 +7,8 @@ Vue.js を使うのは初めてですか？ [エッセンシャルガイド](/gu
 このガイドは主に、Vue 3 の新機能と変更点について学びたい Vue 2 の経験があるユーザーを対象としています。 **Vue 3 を試す前にこのガイドを上から下まで読む必要はありません。** 多くの変更があったように見えますが、Vue についてあなたが知っていて愛していることの多くは同じままです。 しかし、私たちは可能な限り徹底し、文書化されたすべての変更について詳細な説明と例を提供したいと考えました。
 
 - [クイックスタート](#クイックスタート)
-- [注目すべき新機能](#注目すべき新機能)
+- [移行ビルド](#移行ビルド)
+- [注目すべき新機能](#注目すべき新機能)
 - [破壊的変更](#破壊的変更)
 - [サポートライブラリ](#サポートライブラリ)
 
@@ -20,6 +21,8 @@ Vue.js を使うのは初めてですか？ [エッセンシャルガイド](/gu
 
 ## クイックスタート
 
+新しいプロジェクトで Vue 3 をすぐに試してみたい場合:
+
 - CDN 経由: `<script src="https://unpkg.com/vue@next"></script>`
 - [Codepen](https://codepen.io/yyx990803/pen/OJNoaZL) 上のブラウザ内プレイグラウンド
 - [CodeSandbox](https://v3.vue.new) 上のブラウザ内サンドボックス
@@ -37,6 +40,10 @@ Vue.js を使うのは初めてですか？ [エッセンシャルガイド](/gu
   # select vue 3 preset
   ```
 
+## 移行ビルド
+
+既存の Vue 2 プロジェクトやライブラリを Vue 3 にアップグレードする場合は、Vue 2 と互換性のある API を提供する Vue 3 のビルドを提供しています。詳しくは[移行ビルド](./migration-build.html)のページをご覧ください。
+
 ## 注目すべき新機能
 
 Vue 3 で注目すべきいくつかの新機能の次のとおりです。
@@ -53,10 +60,6 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。
 
 ## 破壊的変更
 
-::: info INFO
-Vue 2 と互換性のある動作と、互換性のない使用法に対する実行時警告を備えた Vue 3 の移行専用ビルドの開発に取り組んでいます。 重要な Vue 2 アプリの移行を計画している場合は、よりスムーズな体験のために移行ビルドを待つことを強くお勧めします。
-:::
-
 以下は、2.x からの破壊的変更の一覧です。:
 
 ### グローバル API

src/guide/migration/keycode-modifiers.md

@@ -54,3 +54,8 @@ Vue.config.keyCodes = {
 ## 移行の戦略
 
 キーコードを利用している場合は、ケバブケースでの命名に変更することを推奨します。
+
+[移行ビルドのフラグ:](migration-build.html#compat-の設定)
+
+- `CONFIG_KEY_CODES`
+- `V_ON_KEYCODE_MODIFIER`

src/guide/migration/listeners-removed.md

@@ -65,6 +65,8 @@ export default {
 
 `$listeners` の使用をすべて削除します。
 
+[移行ビルドのフラグ: `INSTANCE_LISTENERS`](migration-build.html#compat-の設定)
+
 ## 参照
 
 - [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)