Skip to content

Guide > Advanced Guides > Change Detection Ceveats in Vue 2 の翻訳を追従 #317

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 1 commit into from
May 9, 2021
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
8 changes: 4 additions & 4 deletions src/guide/change-detection.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vue 2 での変更検出の注意事項

> このページは Vue 2.x 以下にのみ適用され、すでに[リアクティブの探求](reactivity.md)を読んでいることが前提です。最初にそのセクションを読んでください。
> このページは Vue 2.x 以下にのみ適用され、すでに [リアクティブの探求](reactivity.md) を読んでいることが前提です。最初にそのセクションを読んでください。

JavaScript の制限のため、Vue は、**検出することができない**変更のタイプがあります。しかし、それらを回避しリアクティビティを維持する方法はあります。

Expand Down Expand Up @@ -84,7 +84,7 @@ vm.items.splice(newLength)

## リアクティブプロパティの宣言

Vue では新しいルートレベルのリアクティブなプロパティを動的に追加することはできないため、インスタンスの初期化時に前もって全てのルートレベルのリアクティブな data プロパティを宣言する必要があります。空の値でもかまいません:
Vue では新しいルートレベルのリアクティブなプロパティを動的に追加することはできないため、コンポーネントインスタンスの初期化時に前もって全てのルートレベルのリアクティブな data プロパティを宣言する必要があります。空の値でもかまいません:

```js
var vm = new Vue({
Expand All @@ -100,7 +100,7 @@ vm.message = 'Hello!'

data オプションで `message` を宣言していないと、Vue は render 関数が存在しないプロパティにアクセスしようとしていることを警告します。

この制限の背後には技術的な理由があります。それは依存性追跡システムにおける一連のエッジケースを排除し、また Vue インスタンスと型チェックシステムとの親和性を高めます。しかしコードの保守性の観点からも重要な事項があります: `data` オブジェクトはコンポーネントの状態のスキーマのようなものです。前もって全てのリアクティブなプロパティを宣言しておくと、後から見直したり別の開発者が読んだりしたときにコンポーネントのコードを簡単に理解することができます。
この制限の背後には技術的な理由があります。それは依存性追跡システムにおける一連のエッジケースを排除し、また コンポーネントインスタンスと型チェックシステムとの親和性を高めます。しかしコードの保守性の観点からも重要な事項があります: `data` オブジェクトはコンポーネントの状態のスキーマのようなものです。前もって全てのリアクティブなプロパティを宣言しておくと、後から見直したり別の開発者が読んだりしたときにコンポーネントのコードを簡単に理解することができます。

## 非同期更新キュー

Expand All @@ -126,7 +126,7 @@ Vue.nextTick(function() {
})
```

`vm.$nextTick()` というインスタンスメソッドもあります。これは、グローバルな Vue を必要とせず、コールバックの `this` コンテキストが自動的に現在の Vue インスタンスに束縛されるため、コンポーネント内で特に役立ちます:
`vm.$nextTick()` というインスタンスメソッドもあります。これは、グローバルな `Vue` を必要とせず、コールバックの `this` コンテキストが自動的に現在のコンポーネントインスタンスに束縛されるため、コンポーネント内で特に役立ちます:

```js
Vue.component('example', {
Expand Down