Skip to content

docs: Components In-Depth > Component Registration の翻訳 #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 22, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions src/guide/component-edge-cases.md
Original file line number Diff line number Diff line change
@@ -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', {
Expand All @@ -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` に精通していない開発者や、単純にテンプレート内にそれを見逃した開発者を想像してみてください。それらはなぜテンプレートが正確に更新されないのかの原因究明に時間を費やすことになるかもしれません。
:::