feature: add migration build flags

vuejs-jp · naokie · Jun 18, 2021 · Jun 9, 2021 · Jun 13, 2021 · Jun 15, 2021
commit 80ab3198715fbf48b606e86dc83dfa2c8cffb8e3
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
@@ -171,6 +171,7 @@ const sidebar = {
   ],
   migration: [
     '/guide/migration/introduction',
+    '/guide/migration/migration-build',
     {
       title: '詳細',
       collapsable: false,

diff --git a/src/guide/migration/array-refs.md b/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`
diff --git a/src/guide/migration/async-components.md b/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-の設定)
diff --git a/src/guide/migration/attribute-coercion.md b/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`
diff --git a/src/guide/migration/attrs-includes-class-style.md b/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)

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

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

diff --git a/src/guide/migration/functional-components.md b/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-の設定)
diff --git a/src/guide/migration/global-api.md b/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,8 @@ app.config.globalProperties.$http = () => {}
 
 また `globalProperties` の代わりに `provide` ([後述](#provide-inject)) を使うことも考えられます。
 
+[移行ビルドのフラグ: `GLOBAL_PROTOTYPE`](migration-build.html#compat-の設定)
+
 ### プラグイン作者へのノート
 
 プラグイン作者の一般的なプラクティスとして、`Vue.use` を使ってプラグインを自動的に UMD ビルドにインストールさせるものがありました。例えば、公式の `vue-router` プラグインのブラウザ環境へのインストールは以下のようになっていました:
@@ -187,6 +194,8 @@ app.directive('focus', {
 app.mount('#app')
 ```
 
+[移行ビルドのフラグ: `GLOBAL_MOUNT`](migration-build.html#compat-の設定)
+
 ## Provide / Inject
 
 Vue 2.x のルートインスタンスで `provide` オプションを使用するのとどうように、Vue 3 のアプリケーションインスタンスでも、アプリケーション内の任意のコンポーネントに注入できる依存関係を提供できます:

diff --git a/src/guide/migration/inline-template-attribute.md b/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>` を代替として使うことです:

diff --git a/src/guide/migration/introduction.md b/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

diff --git a/src/guide/migration/keycode-modifiers.md b/src/guide/migration/keycode-modifiers.md
@@ -54,3 +54,8 @@ Vue.config.keyCodes = {
 ## 移行の戦略
 
 キーコードを利用している場合は、ケバブケースでの命名に変更することを推奨します。
+
+[移行ビルドのフラグ:](migration-build.html#compat-の設定)
+
+- `CONFIG_KEY_CODES`
+- `V_ON_KEYCODE_MODIFIER`
diff --git a/src/guide/migration/listeners-removed.md b/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)

diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md
@@ -88,6 +88,9 @@ app.mount('#app')
   </div>
 </body>
 ```
+## 移行の戦略
+
+[移行ビルドのフラグ: `GLOBAL_MOUNT_CONTAINER`](migration-build.html#compat-の設定)
 
 ## 参照
 

diff --git a/src/guide/migration/props-default-this.md b/src/guide/migration/props-default-this.md
@@ -22,11 +22,15 @@ export default {
     theme: {
       default (props) {
         // `props` 引数はコンポーネントに渡される生の値で、
-        // 型やデフォルトの強制より前のものです。 
+        // 型やデフォルトの強制より前のものです。
         // また、`inject` を使用して注入されたプロパティにアクセスすることもできます。
         return inject('theme', 'default-theme')
       }
     }
   }
 }
-```
+```
+
+## 移行の戦略
+
+[移行ビルドのフラグ: `PROPS_DEFAULT_THIS`](migration-build.html#compat-の設定)
diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md
@@ -176,6 +176,8 @@ export default {
 
 ## 移行の戦略
 
+[移行ビルドのフラグ: `RENDER_FUNCTION`](migration-build.html#compat-の設定)
+
 ### ライブラリの著者
 
 `h` がグローバルにインポートされるということは、Vue コンポーネントを含むライブラリはどれも `import { h } from 'vue'` という記述がどこかに含まれていることを意味します。結果として、ライブラリの著者はビルドにおいて適切に Vue の外部化を設定することが求められるので、少し手間が増えます:

diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md
@@ -63,3 +63,5 @@ this.$slots.header()
 
 1. 3.x の `this.$scopedSlots` の出現箇所をすべて `this.$slots` に置き換えます。
 2. `this.$slots.mySlot` のすべての出現箇所を `this.$slots.mySlot()` に置き換えます。
+
+[移行ビルドのフラグ: `INSTANCE_SCOPED_SLOTS`](migration-build.html#compat-の設定)
diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
@@ -35,6 +35,10 @@ Vue 3 では [Fragments](/guide/migration/fragments.html) があるので、コ
 </transition-group>
 ```
 
+## 移行の戦略
+
+[移行ビルドのフラグ: `TRANSITION_GROUP_ROOT`](migration-build.html#compat-の設定)
+
 ## 参照
 
 - [トランジションクラスの変更](/guide/migration/transition.html)
diff --git a/src/guide/migration/v-bind.md b/src/guide/migration/v-bind.md
@@ -44,3 +44,5 @@ Vue 3.x では、要素に `v-bind="object"` 構文と同一の個別のプロ
 ## 移行の戦略
 
 もしこの上書きの機能を `v-bind` のために利用しているとしたら、`v-bind` 属性が個別のプロパティより前に定義されているか確認することを推奨します。
+
+[移行ビルドのフラグ: `COMPILER_V_BIND_OBJECT_ORDER`](migration-build.html#compat-の設定)
diff --git a/src/guide/migration/v-if-v-for.md b/src/guide/migration/v-if-v-for.md
@@ -28,6 +28,8 @@ Vue.js で最も一般的に使われているディレクティブの二つは
 
 これをテンプレートレベルで管理するのではなく、これを実現する一つの方法は表示されている要素のリストを除外する算出プロパティを作成することです。
 
+[移行ビルドのフラグ: `COMPILER_V_IF_V_FOR_PRECEDENCE`](migration-build.html#compat-の設定)
+
 ## 参照
 
 - [リストレンダリング - フィルタ・ソート結果の表示](/guide/list.html#displaying-filtered-sorted-results)

diff --git a/src/guide/migration/v-model.md b/src/guide/migration/v-model.md
@@ -182,6 +182,11 @@ this.$emit('update:title', newValue)
   }
   ```
 
+[移行ビルドのフラグ:](migration-build.html#compat-の設定)
+
+- `COMPONENT_V_MODEL`
+- `COMPILER_V_BIND_SYNC`
+
 ## 次のステップ
 
 新しい `v-model` 構文の詳細については、以下を参照してください。

diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md
@@ -49,6 +49,8 @@ badges:
 - `.native` 修飾子のすべてのインスタンスを削除します。
 - すべてのコンポーネントが、 `emits` オプションでイベントを記録するようにします。
 
+[移行ビルドのフラグ: `COMPILER_V_ON_NATIVE`](migration-build.html#compat-の設定)
+
 ## 参照
 
 - [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough)

diff --git a/src/guide/migration/vnode-lifecycle-events.md b/src/guide/migration/vnode-lifecycle-events.md
@@ -43,6 +43,8 @@ Vue 3 では、イベント名のプレフィックスに `vnode-` がついて
 
 ほとんどの場合、プレフィックスの変更だけで済みます。ライフサイクルフックの `beforeDestroy` と `destroyed` は、それぞれ `beforeUnmount` と `unmounted` に名前が変更され、対応するイベント名も更新する必要があります。
 
+[移行ビルドのフラグ: `INSTANCE_EVENT_HOOKS`](migration-build.html#compat-の設定)
+
 ## 参照
 
 - [移行ガイド - イベント API](/guide/migration/events-api.html)
diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md
@@ -28,3 +28,5 @@ watch: {
 ## 移行の戦略
 
 配列の変更を監視することに依存している場合は、 `deep` プロパティを追加して、コールバックが正しく実行されるようにします。
+
+[移行ビルドのフラグ: `WATCH_ARRAY`](migration-build.html#compat-の設定)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -95,3 +95,4 @@ const asyncComponent = defineAsyncComponent(
		非同期コンポーネントの使い方のさらなる情報は、以下を見てください:

		- [ガイド: 動的 & 非同期コンポーネント](/guide/component-dynamic-async.html#動的コンポーネントにおける-keep-alive-の利用)
		- [移行ビルドのフラグ: `COMPONENT_ASYNC`](migration-build.html#compat-の設定)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,3 +79,5 @@ export default {
		これは Vue 2 と同じような Event Emitter API を提供します。

		これらのメソッドは、Vue 3 の将来の互換ビルドでもサポートされる可能性があります。

		[移行ビルドのフラグ: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-の設定)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -117,3 +117,4 @@ export default {

		- [移行: Render 関数](/guide/migration/render-function-api.html)
		- [ガイド: Render 関数](/guide/render-function.html)
		- [移行ビルドのフラグ: `COMPONENT_FUNCTIONAL`](migration-build.html#compat-の設定)
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,6 +88,9 @@ app.mount('#app') @@
       </div>
     </body>
     ```
+    ## 移行の戦略
+    [移行ビルドのフラグ: `GLOBAL_MOUNT_CONTAINER`](migration-build.html#compat-の設定)
     ## 参照
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -63,3 +63,5 @@ this.$slots.header()

		1. 3.x の `this.$scopedSlots` の出現箇所をすべて `this.$slots` に置き換えます。
		2. `this.$slots.mySlot` のすべての出現箇所を `this.$slots.mySlot()` に置き換えます。

		[移行ビルドのフラグ: `INSTANCE_SCOPED_SLOTS`](migration-build.html#compat-の設定)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -44,3 +44,5 @@ Vue 3.x では、要素に `v-bind="object"` 構文と同一の個別のプロ
		## 移行の戦略

		もしこの上書きの機能を `v-bind` のために利用しているとしたら、`v-bind` 属性が個別のプロパティより前に定義されているか確認することを推奨します。

		[移行ビルドのフラグ: `COMPILER_V_BIND_OBJECT_ORDER`](migration-build.html#compat-の設定)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,3 +28,5 @@ watch: {
		## 移行の戦略

		配列の変更を監視することに依存している場合は、 `deep` プロパティを追加して、コールバックが正しく実行されるようにします。

		[移行ビルドのフラグ: `WATCH_ARRAY`](migration-build.html#compat-の設定)