From 3712bdfee9e2bf3b009ff0688f879f4f0ab3ce1f Mon Sep 17 00:00:00 2001 From: ebarakazuhiro Date: Tue, 22 Sep 2020 19:12:01 +0900 Subject: [PATCH 1/4] Translate Components In-Depth > Handling Edge Cases --- src/guide/component-edge-cases.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md index 969227fc..271d88df 100644 --- a/src/guide/component-edge-cases.md +++ b/src/guide/component-edge-cases.md @@ -1,24 +1,24 @@ -# Handling Edge Cases +# 特別な問題に対処する -> This page assumes you've already read the [Components Basics](components.md). Read that first if you are new to components. +> このページはすでに[コンポーネントの基本](components.md)を読んでいることを前提に書いています。もしまだ読んでいないのなら、先に読みましょう。 :::tip Note -All the features on this page document the handling of edge cases, meaning unusual situations that sometimes require bending Vue's rules a little. Note however, that they all have disadvantages or situations where they could be dangerous. These are noted in each case, so keep them in mind when deciding to use each feature. +特別な問題、つまり珍しい状況に対処するためのこのページの全ての機能は、時に Vue のルールを多少なりとも曲げることになります。しかし注意して欲しいのが、それらは全てデメリットや危険な状況をもたらし得るということです。これらのマイナス的な面はそれぞれのケースで注意されているので、このページで紹介されるそれぞれの機能を使用すると決めたときは心に止めておいてください。 ::: -## Controlling Updates +## 更新をコントロールする -Thanks to Vue's Reactivity system, it always knows when to update (if you use it correctly). There are edge cases, however, when you might want to force an update, despite the fact that no reactive data has changed. Then there are other cases when you might want to prevent unnecessary updates. +Vue のリアクティブシステムのおかげで、いつもいつ更新するかを知ることができます(もしあなたが正確に使っているなら)。しかし、リアクティブデータが変更されていないにも関わらず更新を強制したいときなど、特別なケースがあります。 -### Forcing an Update +### 強制更新 -If you find yourself needing to force an update in Vue, in 99.99% of cases, you've made a mistake somewhere. For example, you may be relying on state that isn't tracked by Vue's reactivity system, e.g. with `data` property added after component creation. +もし Vue で強制更新をする必要な場面に遭遇する場合、99.99% のケースであなたは何かを間違えています。例えば、コンポーネントの作成後に追加された `data` プロパティなど、Vue のリアクティブシステムが追跡していない状態に依存している可能性があります。 -However, if you've ruled out the above and find yourself in this extremely rare situation of having to manually force an update, you can do so with [`$forceUpdate`](../api/instance-methods.html#forceupdate). +しかし、もし上記の可能性を排除し、手動で強制更新をする非常に稀な状況と認識しているならば、 [`$forceUpdate`](./api/instance-methods.html#forceupdate) を用いることで強制更新をすることができます。 -### Cheap Static Components with `v-once` +### `v-once` を使用するチープスタティックコンポーネント -Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this: +プレーンな HTML 要素をレンダリングすることは Vue においてとても高速です。しかしときどき**多くの**静的なコンテントを含むコンポーネントを持ちたい場合もあるかもしれません。これらのケースでは、このようにルート要素に `v-once` ディレクティブを加えることによって一度だけ評価され、そしてキャッシュされることを保証することができます: ``` js app.component('terms-of-service', { @@ -32,5 +32,5 @@ app.component('terms-of-service', { ``` :::tip -Once again, try not to overuse this pattern. While convenient in those rare cases when you have to render a lot of static content, it's simply not necessary unless you actually notice slow rendering - plus, it could cause a lot of confusion later. For example, imagine another developer who's not familiar with `v-once` or simply misses it in the template. They might spend hours trying to figure out why the template isn't updating correctly. +再度注意しますが、このパターンを多用しないようにしてください。多くの静的な内容を描画しなければならないとき、これらのレアケースは便利である一方、あなたが実際に遅いレンダリングに気付かない限りは絶対に必要ではありません。さらにそれは後に多くの混乱の原因になり得るでしょう。例えば、 `v-once` に精通していない開発者や、単純にテンプレート内にそれを見逃した開発者を想像してみてください。それらはなぜテンプレートが正確に更新されないのかの原因究明に時間を費やすことになるかもしれません。 ::: From 70e296227c075e622a309f2413dfa462d64ac8e8 Mon Sep 17 00:00:00 2001 From: ebarakazuhiro Date: Tue, 22 Sep 2020 19:20:16 +0900 Subject: [PATCH 2/4] : From. change to --- src/guide/component-edge-cases.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md index 271d88df..e2829378 100644 --- a/src/guide/component-edge-cases.md +++ b/src/guide/component-edge-cases.md @@ -18,7 +18,7 @@ Vue のリアクティブシステムのおかげで、いつもいつ更新す ### `v-once` を使用するチープスタティックコンポーネント -プレーンな HTML 要素をレンダリングすることは Vue においてとても高速です。しかしときどき**多くの**静的なコンテントを含むコンポーネントを持ちたい場合もあるかもしれません。これらのケースでは、このようにルート要素に `v-once` ディレクティブを加えることによって一度だけ評価され、そしてキャッシュされることを保証することができます: +プレーンな HTML 要素をレンダリングすることは Vue においてとても高速です。しかしときどき**多くの**静的なコンテントを含むコンポーネントを持ちたい場合もあるかもしれません。これらのケースでは、このようにルート要素に `v-once` ディレクティブを加えることによって一度だけ評価され、そしてキャッシュされることを保証することができます。 ``` js app.component('terms-of-service', { From 49445e028c8056a386de1920ac9cb791cda8aec4 Mon Sep 17 00:00:00 2001 From: ebarakazuhiro Date: Tue, 22 Sep 2020 19:31:04 +0900 Subject: [PATCH 3/4] Fix typo --- src/guide/component-edge-cases.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md index e2829378..1707568e 100644 --- a/src/guide/component-edge-cases.md +++ b/src/guide/component-edge-cases.md @@ -14,7 +14,7 @@ Vue のリアクティブシステムのおかげで、いつもいつ更新す もし Vue で強制更新をする必要な場面に遭遇する場合、99.99% のケースであなたは何かを間違えています。例えば、コンポーネントの作成後に追加された `data` プロパティなど、Vue のリアクティブシステムが追跡していない状態に依存している可能性があります。 -しかし、もし上記の可能性を排除し、手動で強制更新をする非常に稀な状況と認識しているならば、 [`$forceUpdate`](./api/instance-methods.html#forceupdate) を用いることで強制更新をすることができます。 +しかし、もし上記の可能性を排除し、手動で強制更新をする非常に稀な状況と認識しているならば、 [`$forceUpdate`](../api/instance-methods.html#forceupdate) を用いることで強制更新をすることができます。 ### `v-once` を使用するチープスタティックコンポーネント From cb31808a79a0fc76f232952acaf5742aa290d753 Mon Sep 17 00:00:00 2001 From: ebarakazuhiro Date: Tue, 22 Sep 2020 23:30:05 +0900 Subject: [PATCH 4/4] Undo --- src/guide/component-edge-cases.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md index 1707568e..bae6e5a3 100644 --- a/src/guide/component-edge-cases.md +++ b/src/guide/component-edge-cases.md @@ -18,7 +18,7 @@ Vue のリアクティブシステムのおかげで、いつもいつ更新す ### `v-once` を使用するチープスタティックコンポーネント -プレーンな HTML 要素をレンダリングすることは Vue においてとても高速です。しかしときどき**多くの**静的なコンテントを含むコンポーネントを持ちたい場合もあるかもしれません。これらのケースでは、このようにルート要素に `v-once` ディレクティブを加えることによって一度だけ評価され、そしてキャッシュされることを保証することができます。 +プレーンな HTML 要素をレンダリングすることは Vue においてとても高速です。しかしときどき**多くの**静的なコンテントを含むコンポーネントを持ちたい場合もあるかもしれません。これらのケースでは、このようにルート要素に `v-once` ディレクティブを加えることによって一度だけ評価され、そしてキャッシュされることを保証することができます: ``` js app.component('terms-of-service', {