5
5
6
6
# グローバル API <MigrationBadges :badges =" $frontmatter.badges " />
7
7
8
- Vue 2.x では、グローバルに Vue の振る舞いを変更するグローバル API や設定が多数ありました。例えば、グローバルコンポーネントを作る際には 、 以下のような ` Vue.component ` API を使用していました :
8
+ Vue 2.x では、グローバルに Vue の振る舞いを変更するグローバル API や設定が多数ありました。例えば、グローバルコンポーネントを登録するには 、 以下のような ` Vue.component ` API を使用します :
9
9
10
10
``` js
11
11
Vue .component (' button-counter' , {
@@ -28,18 +28,18 @@ Vue.directive('focus', {
28
28
29
29
- グローバル設定を使用することで、テスト中に他のテストケースを誤って汚染しやすくなってしまいました。ユーザーは元のグローバル設定を保存し、各テスト後に元に戻すことを注意深くやる必要がありました (例 ` Vue.config.errorHandler ` のリセット)。` Vue.use ` や、` Vue.mixin ` のような API は、影響を元に戻す方法もありません。このため、プラグインを含むテストは特に厄介でした。実際、vue-test-utils はそれらに対応するために ` createLocalVue ` という特別な API を作らなければなりませんでした:
30
30
31
- ``` js
32
- import { createLocalVue , mount } from ' @vue/test-utils'
31
+ ``` js
32
+ import { createLocalVue , mount } from ' @vue/test-utils'
33
33
34
- // 拡張した `Vue` コンストラクタを作成
35
- const localVue = createLocalVue ()
34
+ // 拡張した `Vue` コンストラクタを作成
35
+ const localVue = createLocalVue ()
36
36
37
- // "ローカル" Vue コンストラクタに、"グローバル" にプラグインをインストール
38
- localVue .use (MyPlugin)
37
+ // "ローカル" Vue コンストラクタに、"グローバル" にプラグインをインストール
38
+ localVue .use (MyPlugin)
39
39
40
- // `localVue` をマウントオプションに渡す
41
- mount (Component, { localVue })
42
- ```
40
+ // `localVue` をマウントオプションに渡す
41
+ mount (Component, { localVue })
42
+ ```
43
43
44
44
- また、グローバル設定では、同じページ上の複数のアプリケーション間でグローバル設定が異なる Vue のコピーを共有することが困難でした。
45
45
@@ -69,10 +69,11 @@ Vue の [CDN](/guide/installation.html#cdn) ビルドを使っている場合、
69
69
70
70
``` js
71
71
const { createApp } = Vue
72
+
72
73
const app = createApp ({})
73
74
```
74
75
75
- アプリケーションインスタンスは、現在のグローバル API のサブセットを公開します。おおまかには、_ Vue の振る舞いをグローバルに変更する全ての API は、アプリケーションインスタンスに移されます_ 。こちらは、現在のグローバル API とインスタンス API との対応表です:
76
+ アプリケーションインスタンスは、 Vue 2 のグローバル API のサブセットを公開します。おおまかには、_ Vue の振る舞いをグローバルに変更する全ての API は、アプリケーションインスタンスに移されます_ 。こちらは、 Vue 2 のグローバル API とインスタンス API との対応表です:
76
77
77
78
| 2.x グローバル API | 3.x インスタンス API (` app ` ) |
78
79
| -------------------------- | ------------------------------------------------------------------------------------------------ |
@@ -102,17 +103,17 @@ ES Modules ビルドでは、モジュールバンドラーと一緒に使用さ
102
103
Vue .config .ignoredElements = [' my-el' , / ^ ion-/ ]
103
104
104
105
// after
105
- const app = Vue . createApp ({})
106
+ const app = createApp ({})
106
107
app .config .isCustomElement = tag => tag .startsWith (' ion-' )
107
108
```
108
109
109
110
::: tip 重要
110
111
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 ) で。
112
113
113
114
- ランタイム限定ビルド使用時に、` config.isCustomElement ` が代入された場合、ビルドの設定でこのオプションを設定するように警告が表示されます。
114
115
- これは、Vue CLI 設定の新しいトップレベルのオプションになります。
115
- :::
116
+ :::
116
117
117
118
### ` Vue.prototype ` は ` config.globalProperties ` と置換
118
119
@@ -127,7 +128,7 @@ Vue.prototype.$http = () => {}
127
128
128
129
``` js
129
130
// after - Vue 3
130
- const app = Vue . createApp ({})
131
+ const app = createApp ({})
131
132
app .config .globalProperties .$http = () => {}
132
133
```
133
134
@@ -154,7 +155,7 @@ app.use(VueRouter)
154
155
155
156
## アプリケーションインスタンスのマウント
156
157
157
- ` createApp(/* オプション */) ` で初期化した後、アプリケーションインスタンス ` app ` は、` app.mount(domTarget) ` を使って Vue ルートインスタンスをマウントできます 。
158
+ ` createApp(/* オプション */) ` で初期化した後、アプリケーションインスタンス ` app ` は、` app.mount(domTarget) ` を使ってルートコンポーネントインスタンスをマウントできます 。
158
159
159
160
``` js
160
161
import { createApp } from ' vue'
@@ -218,7 +219,7 @@ import Bar from './Bar.vue'
218
219
219
220
const createMyApp = options => {
220
221
const app = createApp (options)
221
- app .directive (' focus' /* ... */ )
222
+ app .directive (' focus' , /* ... */ )
222
223
223
224
return app
224
225
}
@@ -227,4 +228,4 @@ createMyApp(Foo).mount('#foo')
227
228
createMyApp (Bar).mount (' #bar' )
228
229
```
229
230
230
- このようにして、 ` fucus ` ディレクティブは Foo と Bar 両方のインスタンスとその子で有効になります。
231
+ このようにして、 ` fucus ` ディレクティブは ` Foo ` と ` Bar ` 両方のインスタンスとその子で有効になります。
0 commit comments