Skip to content

Commit e9e3b31

Browse files
committed
1 parent 61db236 commit e9e3b31

File tree

1 file changed

+19
-18
lines changed

1 file changed

+19
-18
lines changed

src/guide/migration/global-api.md

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ badges:
55

66
# グローバル API <MigrationBadges :badges="$frontmatter.badges" />
77

8-
Vue 2.x では、グローバルに Vue の振る舞いを変更するグローバル API や設定が多数ありました。例えば、グローバルコンポーネントを作る際には、 以下のような `Vue.component` API を使用していました:
8+
Vue 2.x では、グローバルに Vue の振る舞いを変更するグローバル API や設定が多数ありました。例えば、グローバルコンポーネントを登録するには、 以下のような `Vue.component` API を使用します:
99

1010
```js
1111
Vue.component('button-counter', {
@@ -28,18 +28,18 @@ Vue.directive('focus', {
2828

2929
- グローバル設定を使用することで、テスト中に他のテストケースを誤って汚染しやすくなってしまいました。ユーザーは元のグローバル設定を保存し、各テスト後に元に戻すことを注意深くやる必要がありました (例 `Vue.config.errorHandler` のリセット)。`Vue.use` や、`Vue.mixin` のような API は、影響を元に戻す方法もありません。このため、プラグインを含むテストは特に厄介でした。実際、vue-test-utils はそれらに対応するために `createLocalVue` という特別な API を作らなければなりませんでした:
3030

31-
```js
32-
import { createLocalVue, mount } from '@vue/test-utils'
31+
```js
32+
import { createLocalVue, mount } from '@vue/test-utils'
3333

34-
// 拡張した `Vue` コンストラクタを作成
35-
const localVue = createLocalVue()
34+
// 拡張した `Vue` コンストラクタを作成
35+
const localVue = createLocalVue()
3636

37-
// "ローカル" Vue コンストラクタに、"グローバル" にプラグインをインストール
38-
localVue.use(MyPlugin)
37+
// "ローカル" Vue コンストラクタに、"グローバル" にプラグインをインストール
38+
localVue.use(MyPlugin)
3939

40-
// `localVue` をマウントオプションに渡す
41-
mount(Component, { localVue })
42-
```
40+
// `localVue` をマウントオプションに渡す
41+
mount(Component, { localVue })
42+
```
4343

4444
- また、グローバル設定では、同じページ上の複数のアプリケーション間でグローバル設定が異なる Vue のコピーを共有することが困難でした。
4545

@@ -69,10 +69,11 @@ Vue の [CDN](/guide/installation.html#cdn) ビルドを使っている場合、
6969

7070
```js
7171
const { createApp } = Vue
72+
7273
const app = createApp({})
7374
```
7475

75-
アプリケーションインスタンスは、現在のグローバル API のサブセットを公開します。おおまかには、_Vue の振る舞いをグローバルに変更する全ての API は、アプリケーションインスタンスに移されます_ 。こちらは、現在のグローバル API とインスタンス API との対応表です:
76+
アプリケーションインスタンスは、 Vue 2 のグローバル API のサブセットを公開します。おおまかには、_Vue の振る舞いをグローバルに変更する全ての API は、アプリケーションインスタンスに移されます_ 。こちらは、 Vue 2 のグローバル API とインスタンス API との対応表です:
7677

7778
| 2.x グローバル API | 3.x インスタンス API (`app`) |
7879
| -------------------------- | ------------------------------------------------------------------------------------------------ |
@@ -102,17 +103,17 @@ ES Modules ビルドでは、モジュールバンドラーと一緒に使用さ
102103
Vue.config.ignoredElements = ['my-el', /^ion-/]
103104

104105
// after
105-
const app = Vue.createApp({})
106+
const app = createApp({})
106107
app.config.isCustomElement = tag => tag.startsWith('ion-')
107108
```
108109

109110
::: tip 重要
110111

111-
Vue 3.0 では、要素がコンポーネントであるかどうかのチェックはコンパイルフェーズに移されたため、この設定はランタイムコンパイラを使用しているときにのみ尊重されます。ランタイム限定のビルドを使用している場合は、代わりにビルド設定で `isCustomElement``@vue/compiler-dom` に渡す必要があります - 例えば [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions) で。
112+
Vue 3 では、要素がコンポーネントであるかどうかのチェックはコンパイルフェーズに移されたため、この設定はランタイムコンパイラを使用しているときにのみ尊重されます。ランタイム限定のビルドを使用している場合は、代わりにビルド設定で `isCustomElement``@vue/compiler-dom` に渡す必要があります - 例えば [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions) で。
112113

113114
- ランタイム限定ビルド使用時に、`config.isCustomElement` が代入された場合、ビルドの設定でこのオプションを設定するように警告が表示されます。
114115
- これは、Vue CLI 設定の新しいトップレベルのオプションになります。
115-
:::
116+
:::
116117

117118
### `Vue.prototype``config.globalProperties` と置換
118119

@@ -127,7 +128,7 @@ Vue.prototype.$http = () => {}
127128

128129
```js
129130
// after - Vue 3
130-
const app = Vue.createApp({})
131+
const app = createApp({})
131132
app.config.globalProperties.$http = () => {}
132133
```
133134

@@ -154,7 +155,7 @@ app.use(VueRouter)
154155

155156
## アプリケーションインスタンスのマウント
156157

157-
`createApp(/* オプション */)` で初期化した後、アプリケーションインスタンス `app` は、`app.mount(domTarget)` を使って Vue ルートインスタンスをマウントできます
158+
`createApp(/* オプション */)` で初期化した後、アプリケーションインスタンス `app` は、`app.mount(domTarget)` を使ってルートコンポーネントインスタンスをマウントできます
158159

159160
```js
160161
import { createApp } from 'vue'
@@ -218,7 +219,7 @@ import Bar from './Bar.vue'
218219

219220
const createMyApp = options => {
220221
const app = createApp(options)
221-
app.directive('focus' /* ... */)
222+
app.directive('focus', /* ... */)
222223

223224
return app
224225
}
@@ -227,4 +228,4 @@ createMyApp(Foo).mount('#foo')
227228
createMyApp(Bar).mount('#bar')
228229
```
229230

230-
このようにして、 `fucus` ディレクティブは Foo と Bar 両方のインスタンスとその子で有効になります。
231+
このようにして、 `fucus` ディレクティブは `Foo``Bar` 両方のインスタンスとその子で有効になります。

0 commit comments

Comments
 (0)