You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -26,33 +26,33 @@ import { MyComponent } from './MyComponent.vue'
26
26
test('an async feature', async () => {
27
27
constwrapper=shallowMount(MyComponent)
28
28
29
-
//execute some DOM-related tasks
29
+
// DOM に関連するいくつかのタスクを実行
30
30
31
31
awaitwrapper.vm.$nextTick()
32
32
33
-
//run your assertions
33
+
//アサーション実行
34
34
})
35
35
```
36
36
37
-
`Vue.nextTick()`is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()`is just a handy wrapper around `Vue.nextTick()`with the callback’s `this`context automatically bound to the current instance for convenience.
37
+
`Vue.nextTick()`は、単一の Vue オブジェクト上で直接公開されるグローバル API です - 実際のところ、インスタンスメソッド `$nextTick()`は `Vue.nextTick()`の便利なラッパーに過ぎず、コールバックの `this`コンテキストは便宜上、現在のインスタンスに自動的に結合されます。
38
38
39
-
But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in your app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()`instead? In such a case, the code for `nextTick()`will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
39
+
しかし、手動で DOM を操作する必要がなく、アプリで非同期コンポーネントを使用したりテストしたりすることもない場合はどうでしょうか？ あるいは、何らかの理由で、代わりに古き良き `window.setTimeout()`を使いたい場合はどうでしょうか？ このような場合、`nextTick()`のコードはデッドコード、つまり、書かれているが使われないコードになってしまいます。特に、1 キロバイト単位が重要なクライアントサイドの文脈では、デッドコードは良いことではありません。
40
40
41
-
Module bundlers like webpack and Rollup (which Vite is based upon) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for “dead code elimination.” Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()`are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not.
41
+
webpack や（Vite のベースとなっている）Rollup のようなモジュールバンドラーは、[ツリーシェイキング](https://webpack.js.org/guides/tree-shaking/)をサポートしています。これは「デッドコードの排除」を意味する装飾的な用語です。残念ながら以前の Vue バージョンではコードの記述方法が原因で、`Vue.nextTick()`のようなグローバル API はツリーシェイクされず、実際に使われる場所や使わない場所に関係なく最終的にバンドルに含まれます。
42
42
43
-
## 3.x Syntax
43
+
## 3.x の構文
44
44
45
-
In Vue 3, the global and internal APIs have been restructured with tree-shaking support in mind. As a result, the global APIs can now only be accessed as named exports for the ES Modules build. For example, our previous snippets should now look like this:
45
+
Vue 3 では、ツリーシェイキングのサポートを念頭に置いて、グローバル API と内部 API が再構築されました。その結果、グローバル API は、ES モジュールビルドの名前付きエクスポートとしてのみアクセスできるようになりました。例えば、上記のスニペットは次のようになります:
46
46
47
47
```js
48
48
import { nextTick } from'vue'
49
49
50
50
nextTick(() => {
51
-
//something DOM-related
51
+
// DOM 関連の何か
52
52
})
53
53
```
54
54
55
-
and
55
+
さらに
56
56
57
57
```js
58
58
import { shallowMount } from'@vue/test-utils'
@@ -62,40 +62,40 @@ import { nextTick } from 'vue'
62
62
test('an async feature', async () => {
63
63
constwrapper=shallowMount(MyComponent)
64
64
65
-
//execute some DOM-related tasks
65
+
// DOM に関連するいくつかのタスクを実行
66
66
67
67
awaitnextTick()
68
68
69
-
//run your assertions
69
+
//アサーション実行
70
70
})
71
71
```
72
72
73
-
Calling `Vue.nextTick()`directly will now result in the infamous `undefined is not a function`error.
73
+
`Vue.nextTick()`を直接呼び出すと、悪名高い `undefined is not a function`エラーが発生するようになりました。
74
74
75
-
With this change, provided the module bundler supports tree-shaking, global APIs that are not used in a Vue application will be eliminated from the final bundle, resulting in an optimal file size.
75
+
この変更により、モジュールバンドラーがツリーシェイキングをサポートしている場合、Vue アプリケーションで使用されないグローバル API は最終的なバンドルから排除され、最適なファイルサイズになります。
76
76
77
-
## Affected APIs
77
+
## 影響を受ける API
78
78
79
-
These global APIs in Vue 2.x are affected by this change:
79
+
以下の Vue 2.x のグローバル API は、この変更の影響を受けます:
80
80
81
81
-`Vue.nextTick`
82
-
-`Vue.observable` (replaced by `Vue.reactive`)
82
+
-`Vue.observable`（`Vue.reactive` に置き換え）
83
83
-`Vue.version`
84
-
-`Vue.compile` (only in full builds)
85
-
-`Vue.set` (only in compat builds)
86
-
-`Vue.delete` (only in compat builds)
84
+
-`Vue.compile`（フルビルドのみ）
85
+
-`Vue.set`（互換ビルドのみ）
86
+
-`Vue.delete`（互換ビルドのみ）
87
87
88
-
## Internal Helpers
88
+
## 内部ヘルパー
89
89
90
-
In addition to public APIs, many of the internal components/helpers are now exported as named exports as well. This allows the compiler to output code that only imports features when they are used. For example the following template:
90
+
パブリック API に加え、内部コンポーネントやヘルパーの多くも名前付きエクスポートとして公開されるようになりました。これにより、コンパイラーは、機能が使用されるときだけインポートするコードを出力できます。例えば次のテンプレートは:
91
91
92
92
```html
93
93
<transition>
94
94
<divv-show="ok">hello</div>
95
95
</transition>
96
96
```
97
97
98
-
is compiled into something similar to the following:
This essentially means the `Transition`component only gets imported when the application actually makes use of it. In other words, if the application doesn’t have any `<transition>`component, the code supporting this feature will not be present in the final bundle.
With global tree-shaking, the users only “pay” for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all.
The above only applies to the [ES Modules builds](https://github.com/vuejs/core/tree/master/packages/vue#which-dist-file-to-use) for use with tree-shaking capable bundlers - the UMD build still includes all features and exposes everything on the Vue global variable (and the compiler will produce appropriate output to use APIs off the global instead of importing).
112
+
::: warning 重要
113
+
上記は、ツリーシェイキング可能なバンドラーで使用するための [ES モジュールビルド](https://github.com/vuejs/core/tree/master/packages/vue#which-dist-file-to-use)にのみ適用されます。UMD ビルドは依然としてすべての機能を含み、Vue グローバル変数ですべてを公開します（そしてコンパイラーは、インポートする代わりにグローバルから API を使用するように適切な出力を生成します）。
114
114
:::
115
115
116
-
## Usage in Plugins
116
+
## プラグインでの使用
117
117
118
-
If your plugin relies on an affected Vue 2.x global API, for instance:
118
+
あなたのプラグインが、影響を受ける Vue 2.x のグローバル API に依存している場合、例えば:
119
119
120
120
```js
121
121
constplugin= {
@@ -127,7 +127,7 @@ const plugin = {
127
127
}
128
128
```
129
129
130
-
In Vue 3, you’ll have to import it explicitly:
130
+
Vue 3 では、明示的にインポートする必要があります:
131
131
132
132
```js
133
133
import { nextTick } from'vue'
@@ -141,7 +141,7 @@ const plugin = {
141
141
}
142
142
```
143
143
144
-
If you use a module bundle like webpack, this may cause Vue’s source code to be bundled into the plugin, and more often than not that’s not what you'd expect. A common practice to prevent this from happening is to configure the module bundler to exclude Vue from the final bundle. In webpack's case, you can use the [`externals`](https://webpack.js.org/configuration/externals/)configuration option:
If your module bundler of choice happens to be [Rollup](https://rollupjs.org/), you basically get the same effect for free, as by default Rollup will treat absolute module IDs (`'vue'` in our case) as external dependencies and not include them in the final bundle. During bundling though, it might emit a [“Treating vue as external dependency”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency)warning, which can be suppressed with the `external`option:
0 commit comments