From daddda908b85e6dffa277b4ea0457df58cc10e4f Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 17 Apr 2021 18:35:04 +0900 Subject: [PATCH 1/3] fix: document migrating Vue.prototype to globalProperties https://github.com/vuejs/docs-next/commit/7b110ff015c9db8f4ff7a0c8167f1be320dbc5a8#diff-6661b581434177761e544ef3af1f1c035fad38946f1c8619e45840c5a8bf7941 --- src/guide/migration/global-api.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md index cd5bff47..745e7bb6 100644 --- a/src/guide/migration/global-api.md +++ b/src/guide/migration/global-api.md @@ -76,6 +76,7 @@ const app = createApp({}) | Vue.directive | app.directive | | Vue.mixin | app.mixin | | Vue.use | app.use ([以下を参照](#a-note-for-plugin-authors)) | +| Vue.prototype | app.config.globalProperties ([以下を参照](#vue-prototype-replaced-by-config-globalproperties)) | | グローバルに振る舞いを変更しないその他のグローバル API は [グローバル API の Treeshaking](./global-api-treeshaking.html) にあるように、名前付きエクスポートになりました。 @@ -106,6 +107,25 @@ Vue 3.0 では、要素がコンポーネントであるかどうかのチェッ - これは、Vue CLI 設定の新しいトップレベルのオプションになります。 ::: +### `Vue.prototype` は `config.globalProperties` と置換 + +Vue 2 では、すべてのコンポーネントでアクセス可能なプロパティを追加するために、 `Vue.prototype` がよく使われていました。 + +Vue 3 では、 [`config.globalProperties`](/api/application-config.html#globalproperties) が同様のものです。これらのプロパティは、アプリケーション内でコンポーネントをインスタンス化する際にコピーされます: + +```js +// before - Vue 2 +Vue.prototype.$http = () => {} +``` + +```js +// after - Vue 3 +const app = Vue.createApp({}) +app.config.globalProperties.$http = () => {} +``` + +また `globalProperties` の代わりに `provide` ([後述](#provide-inject)) を使うことも考えられます。 + ### プラグイン作者へのノート プラグイン作者の一般的なプラクティスとして、`Vue.use` を使ってプラグインを自動的に UMD ビルドにインストールさせるものがありました。例えば、公式の `vue-router` プラグインのブラウザ環境へのインストールは以下のようになっていました: @@ -178,6 +198,8 @@ export default { } ``` +`provide` を使うことは、特にプラグインを書くときに、 `globalProperties` の代わりになります。 + ## アプリケーション間での設定の共有 コンポーネントや、ディレクティブの設定をアプリケーション間で共有する方法の一つとして、以下のようなファクトリ関数があります: From 61db236e1f1d4e0de3abfcad94a8e101c922700a Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 17 Apr 2021 18:38:30 +0900 Subject: [PATCH 2/3] docs: mention accessing createApp from a CDN build https://github.com/vuejs/docs-next/commit/567c9a8e3fd7b6f8c69d69f9bc909cbc31f45c62#diff-6661b581434177761e544ef3af1f1c035fad38946f1c8619e45840c5a8bf7941 --- src/guide/migration/global-api.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md index 745e7bb6..a7f4c799 100644 --- a/src/guide/migration/global-api.md +++ b/src/guide/migration/global-api.md @@ -65,6 +65,13 @@ import { createApp } from 'vue' const app = createApp({}) ``` +Vue の [CDN](/guide/installation.html#cdn) ビルドを使っている場合、 `createApp` はグローバルな `Vue` オブジェクトを介して公開されます: + +```js +const { createApp } = Vue +const app = createApp({}) +``` + アプリケーションインスタンスは、現在のグローバル API のサブセットを公開します。おおまかには、_Vue の振る舞いをグローバルに変更する全ての API は、アプリケーションインスタンスに移されます_ 。こちらは、現在のグローバル API とインスタンス API との対応表です: | 2.x グローバル API | 3.x インスタンス API (`app`) | From e9e3b3103b745835f0ba9cf0fe610adb059d9f4c Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 17 Apr 2021 18:49:16 +0900 Subject: [PATCH 3/3] docs: small revisions to the global API migration guide https://github.com/vuejs/docs-next/commit/e2c8359aa4917a81a8945ed4ab470871a3219f9b#diff-6661b581434177761e544ef3af1f1c035fad38946f1c8619e45840c5a8bf7941 --- src/guide/migration/global-api.md | 37 ++++++++++++++++--------------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md index a7f4c799..c55afcb0 100644 --- a/src/guide/migration/global-api.md +++ b/src/guide/migration/global-api.md @@ -5,7 +5,7 @@ badges: # グローバル API -Vue 2.x では、グローバルに Vue の振る舞いを変更するグローバル API や設定が多数ありました。例えば、グローバルコンポーネントを作る際には、 以下のような `Vue.component` API を使用していました: +Vue 2.x では、グローバルに Vue の振る舞いを変更するグローバル API や設定が多数ありました。例えば、グローバルコンポーネントを登録するには、 以下のような `Vue.component` API を使用します: ```js Vue.component('button-counter', { @@ -28,18 +28,18 @@ Vue.directive('focus', { - グローバル設定を使用することで、テスト中に他のテストケースを誤って汚染しやすくなってしまいました。ユーザーは元のグローバル設定を保存し、各テスト後に元に戻すことを注意深くやる必要がありました (例 `Vue.config.errorHandler` のリセット)。`Vue.use` や、`Vue.mixin` のような API は、影響を元に戻す方法もありません。このため、プラグインを含むテストは特に厄介でした。実際、vue-test-utils はそれらに対応するために `createLocalVue` という特別な API を作らなければなりませんでした: -```js -import { createLocalVue, mount } from '@vue/test-utils' + ```js + import { createLocalVue, mount } from '@vue/test-utils' -// 拡張した `Vue` コンストラクタを作成 -const localVue = createLocalVue() + // 拡張した `Vue` コンストラクタを作成 + const localVue = createLocalVue() -// "ローカル" Vue コンストラクタに、"グローバル" にプラグインをインストール -localVue.use(MyPlugin) + // "ローカル" Vue コンストラクタに、"グローバル" にプラグインをインストール + localVue.use(MyPlugin) -// `localVue` をマウントオプションに渡す -mount(Component, { localVue }) -``` + // `localVue` をマウントオプションに渡す + mount(Component, { localVue }) + ``` - また、グローバル設定では、同じページ上の複数のアプリケーション間でグローバル設定が異なる Vue のコピーを共有することが困難でした。 @@ -69,10 +69,11 @@ Vue の [CDN](/guide/installation.html#cdn) ビルドを使っている場合、 ```js const { createApp } = Vue + const app = createApp({}) ``` -アプリケーションインスタンスは、現在のグローバル API のサブセットを公開します。おおまかには、_Vue の振る舞いをグローバルに変更する全ての API は、アプリケーションインスタンスに移されます_ 。こちらは、現在のグローバル API とインスタンス API との対応表です: +アプリケーションインスタンスは、 Vue 2 のグローバル API のサブセットを公開します。おおまかには、_Vue の振る舞いをグローバルに変更する全ての API は、アプリケーションインスタンスに移されます_ 。こちらは、 Vue 2 のグローバル API とインスタンス API との対応表です: | 2.x グローバル API | 3.x インスタンス API (`app`) | | -------------------------- | ------------------------------------------------------------------------------------------------ | @@ -102,17 +103,17 @@ ES Modules ビルドでは、モジュールバンドラーと一緒に使用さ Vue.config.ignoredElements = ['my-el', /^ion-/] // after -const app = Vue.createApp({}) +const app = createApp({}) app.config.isCustomElement = tag => tag.startsWith('ion-') ``` ::: tip 重要 -Vue 3.0 では、要素がコンポーネントであるかどうかのチェックはコンパイルフェーズに移されたため、この設定はランタイムコンパイラを使用しているときにのみ尊重されます。ランタイム限定のビルドを使用している場合は、代わりにビルド設定で `isCustomElement` を `@vue/compiler-dom` に渡す必要があります - 例えば [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions) で。 +Vue 3 では、要素がコンポーネントであるかどうかのチェックはコンパイルフェーズに移されたため、この設定はランタイムコンパイラを使用しているときにのみ尊重されます。ランタイム限定のビルドを使用している場合は、代わりにビルド設定で `isCustomElement` を `@vue/compiler-dom` に渡す必要があります - 例えば [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions) で。 - ランタイム限定ビルド使用時に、`config.isCustomElement` が代入された場合、ビルドの設定でこのオプションを設定するように警告が表示されます。 - これは、Vue CLI 設定の新しいトップレベルのオプションになります。 - ::: +::: ### `Vue.prototype` は `config.globalProperties` と置換 @@ -127,7 +128,7 @@ Vue.prototype.$http = () => {} ```js // after - Vue 3 -const app = Vue.createApp({}) +const app = createApp({}) app.config.globalProperties.$http = () => {} ``` @@ -154,7 +155,7 @@ app.use(VueRouter) ## アプリケーションインスタンスのマウント -`createApp(/* オプション */)` で初期化した後、アプリケーションインスタンス `app` は、`app.mount(domTarget)` を使って Vue ルートインスタンスをマウントできます。 +`createApp(/* オプション */)` で初期化した後、アプリケーションインスタンス `app` は、`app.mount(domTarget)` を使ってルートコンポーネントインスタンスをマウントできます。 ```js import { createApp } from 'vue' @@ -218,7 +219,7 @@ import Bar from './Bar.vue' const createMyApp = options => { const app = createApp(options) - app.directive('focus' /* ... */) + app.directive('focus', /* ... */) return app } @@ -227,4 +228,4 @@ createMyApp(Foo).mount('#foo') createMyApp(Bar).mount('#bar') ``` -このようにして、 `fucus` ディレクティブは Foo と Bar 両方のインスタンスとその子で有効になります。 +このようにして、 `fucus` ディレクティブは `Foo` と `Bar` 両方のインスタンスとその子で有効になります。