From ebe81d8d8709b8e9ab442802a176df240d277415 Mon Sep 17 00:00:00 2001 From: Masaki Koyanagi Date: Tue, 22 Sep 2020 19:44:05 +0900 Subject: [PATCH 1/2] docs: translate guide/reactivity-fundamentals.md (#31) --- src/guide/reactivity-fundamentals.md | 56 ++++++++++++++-------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md index b2a440b1..666f485c 100644 --- a/src/guide/reactivity-fundamentals.md +++ b/src/guide/reactivity-fundamentals.md @@ -1,29 +1,29 @@ -# Reactivity Fundamentals +# リアクティブの基礎 -## Declaring Reactive State +## リアクティブな状態の宣言 -To create a reactive state from a JavaScript object, we can use a `reactive` method: +JavaScript のオブジェクトからリアクティブな状態を作る目的で、`reactive` メソッドを用いることができます: ```js import { reactive } from 'vue' -// reactive state +// リアクティブな状態 const state = reactive({ count: 0 }) ``` -`reactive` is the equivalent of the `Vue.observable()` API in Vue 2.x, renamed to avoid confusion with RxJS observables. Here, the returned state is a reactive object. The reactive conversion is "deep" - it affects all nested properties of the passed object. +`reactive` は Vue 2.x における `Vue.observable()` API に相当し、RxJS における observables との混同を避けるために改名されました。ここで、返される状態はリアクティブオブジェクトです。リアクティブの変換は "deep" であり、渡されたオブジェクトのすべての入れ子になっているプロパティに影響を与えます。 -The essential use case for reactive state in Vue is that we can use it during render. Thanks to dependency tracking, the view automatically updates when reactive state changes. +Vue におけるリアクティブな状態の重要なユースケースは描画の際に用いることができることです。依存関係の追跡のおかげで、リアクティブな状態が変化するとビューが自動的に更新されます。 -This is the very essence of Vue's reactivity system. When you return an object from `data()` in a component, it is internally made reactive by `reactive()`. The template is compiled into a [render function](render-function.html) that makes use of these reactive properties. +これがまさに Vue のリアクティブシステムの本質です。コンポーネント内の `data()` でオブジェクトを返す際に、内部的には `reactive()` によってリアクティブを実現しています。テンプレートはこれらのリアクティブなプロパティを利用する [render 関数](render-function.html)にコンパイルされます。 -You can learn more about `reactive` in the [Basic Reactivity API's](../api/basic-reactivity.html) section +`reactive` についての詳細は [Basic Reactivity API](../api/basic-reactivity.html) セクションを参照してください -## Creating Standalone Reactive Values as `refs` +## 独立したリアクティブな値を `refs` として作成する -Imagine the case where we have a standalone primitive value (for example, a string) and we want to make it reactive. Of course, we could make an object with a single property equal to our string, and pass it to `reactive`. Vue has a method that will do the same for us - it's a `ref`: +独立したプリミティブ値(例えば文字列)があって、それをリアクティブにしたい場合を想像してみてください。もちろん、同じ値の文字列を単一のプロパティとして持つオブジェクトを作成して `reactive` に渡すこともできます。Vue にはこれと同じことをしてくれる `ref` メソッドがあります: ```js import { ref } from 'vue' @@ -31,7 +31,7 @@ import { ref } from 'vue' const count = ref(0) ``` -`ref` will return a reactive and mutable object that serves as a reactive **ref**erence to the internal value it is holding - that's where the name comes from. This object contains the only one property named `value`: +`ref` は、オブジェクト内部の値をリアクティブな参照(**ref**erence - メソッド名の由来)として機能させるミュータブルオブジェクトを返します。このオブジェクトには `value` という名前のプロパティが1つだけ含まれています: ```js import { ref } from 'vue' @@ -43,9 +43,9 @@ count.value++ console.log(count.value) // 1 ``` -### Ref Unwrapping +### ref のアンラップ -When a ref is returned as a property on the render context (the object returned from [setup()](composition-api-setup.html)) and accessed in the template, it automatically unwraps to the inner value. There is no need to append `.value` in the template: +ref がレンダーコンテキスト([setup()](composition-api-setup.html) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値にアンラップされます。テンプレート内においては `.value` を付ける必要はありません: ```vue-html