From aefebea80cfe38d56adbc64c1ee2d5d889ab34ca Mon Sep 17 00:00:00 2001 From: Kohei Tsuchiya Date: Fri, 18 Sep 2020 01:47:15 +0900 Subject: [PATCH 1/3] translate into ja --- src/guide/composition-api-setup.md | 52 +++++++++++++++--------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 77514158..0feed430 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -1,40 +1,40 @@ -# Setup +# セットアップ -> This section uses [single-file component](single-file-component.html) syntax for code examples +> このセクションではコード例に[単一ファイルコンポーネント](single-file-component.html)のシンタックスを使います。 -> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API. +> このガイドは[コンポジション API の導入](composition-api-introduction.html)と[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 コンポジション API に初めて触れる方は、まずそちらを読んでみてください。 -## Arguments +## 引数 -When using the `setup` function, it will take two arguments: +`setup` 関数を使う時、2 つの引数を取ります: 1. `props` 2. `context` -Let's dive deeper into how each argument can be used. +それぞれの引数がどのように使われるのか、深く掘り下げてみましょう。 ### Props -The first argument in the `setup` function is the `props` argument. Just as you would expect in a standard component, `props` inside of a `setup` function are reactive and will be updated when new props are passed in. +`setup` 関数の 1 番目の引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。 ```js // MyBook.vue export default { props: { - title: String + title: String, }, setup(props) { console.log(props.title) - } + }, } ``` :::warning -However, because `props` are reactive, you **cannot use ES6 destructuring** because it will remove props reactivity. +しかし、`props` はリアクティブなので、props のリアクティブを削除してしまうため、**ES6 の分割代入を使うことができません。** ::: -If you need to destructure your props, you can do this safely by utilizing the [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) inside of the `setup` function. +もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) を使うことによって安全に分割代入を行うことができます。 ```js // MyBook.vue @@ -50,7 +50,7 @@ setup(props) { ### Context -The second argument passed to the `setup` function is the `context`. The `context` is a normal JavaScript object that exposes three component properties: +`setup` 関数に渡される 2 番目の引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。: ```js // MyBook.vue @@ -65,11 +65,11 @@ export default { // Emit Events (Method) console.log(context.emit) - } + }, } ``` -The `context` object is a normal JavaScript object, i.e., it is not reactive, this means you can safely use ES6 destructuring on `context`. +`context` オブジェクトは一般的な JavaScript オブジェクトです。 すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。 ```js // MyBook.vue @@ -80,26 +80,26 @@ export default { } ``` -`attrs` and `slots` are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as `attrs.x` or `slots.x`. Also note that unlike `props`, `attrs` and `slots` are **not** reactive. If you intend to apply side effects based on `attrs` or `slots` changes, you should do so inside an `onUpdated` lifecycle hook. +`attrs` と `slots` はステートフルなオブジェクトです。コンポーネント自身が更新されたとき、常に更新されます。 つまり、分割代入の使用を避け、`attrs.x` や `slots.x` のようにプロパティを常に参照する必要があります。 また、`props`とは異なり、 `attrs` と `slots` はリアクティブ**ではない**ということに注意してください。 もし、`attrs` か `slots` の変更による副作用を適用したいのなら、`onUpdated` ライフサイクルフックの中で行うべきです。 -## Accessing Component Properties +## コンポーネントプロパティへのアクセス -When `setup` is executed, the component instance has not been created yet. As a result, you will only be able to access the following properties: +`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます。: - `props` - `attrs` - `slots` - `emit` -In other words, you **will not have access** to the following component options: +言い換えると、以下のコンポーネントオプションには**アクセスできません**。: - `data` - `computed` - `methods` -## Usage with Templates +## テンプレートでの使用 -If `setup` returns an object, the properties on the object can be accessed in the component's template: +`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができます。: ```vue-html @@ -125,11 +125,11 @@ If `setup` returns an object, the properties on the object can be accessed in th ``` -Note that [refs](../api/refs-api.html#ref) returned from `setup` are [automatically unwrapped](../api/refs-api.html#access-in-templates) when accessed in the template so you shouldn't use `.value` in templates. +`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的にアンラップ](../api/refs-api.html#access-in-templates)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。 -## Usage with Render Functions +## 描画関数での使用 -`setup` can also return a render function which can directly make use of the reactive state declared in the same scope: +`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができる描画関数を返すこともできます。: ```js // MyBook.vue @@ -142,10 +142,10 @@ export default { const book = reactive({ title: 'Vue 3 Guide' }) // Please note that we need to explicitly expose ref value here return () => h('div', [readersNumber.value, book.title]) - } + }, } ``` -## Usage of `this` +## `this` の使用 -**Inside `setup()`, `this` won't be a reference to the current active instance** Since `setup()` is called before other component options are resolved, `this` inside `setup()` will behave quite differently from `this` in other options. This might cause confusions when using `setup()` along other Options API. +**`setup()` 内では、`this` は現在のアクティブなインスタンスへの参照にはなりません。** `setup()` は他のコンポーネントオプションが解決される前に呼び出されるので、`setup()` 内の`this` は他のオプション内の `this`とは全く異なる振る舞いをします。 これは、`setup()` を他のオプション API と一緒に使った場合に混乱を引き起こす可能性があります。 From 2e20d898c7acfc58cd4dbe50b6c09231a562fc26 Mon Sep 17 00:00:00 2001 From: Kohei Tsuchiya Date: Sat, 19 Sep 2020 17:26:33 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E5=BE=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/composition-api-setup.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 0feed430..88bd0fa4 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -15,18 +15,18 @@ ### Props -`setup` 関数の 1 番目の引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。 +`setup` 関数の 第一引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。 ```js // MyBook.vue export default { props: { - title: String, + title: String }, setup(props) { console.log(props.title) - }, + } } ``` @@ -50,7 +50,7 @@ setup(props) { ### Context -`setup` 関数に渡される 2 番目の引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。: +`setup` 関数に渡される第二引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。: ```js // MyBook.vue @@ -65,7 +65,7 @@ export default { // Emit Events (Method) console.log(context.emit) - }, + } } ``` @@ -140,9 +140,9 @@ export default { setup() { const readersNumber = ref(0) const book = reactive({ title: 'Vue 3 Guide' }) - // Please note that we need to explicitly expose ref value here + // ここでは明示的に ref の値を公開する必要があることに注意してください。 return () => h('div', [readersNumber.value, book.title]) - }, + } } ``` From 8370fcbcfca36341b4917a9e1fb3382d6aadf831 Mon Sep 17 00:00:00 2001 From: Kohei Tsuchiya Date: Mon, 21 Sep 2020 14:51:44 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E8=A6=8B=E5=87=BA=E3=81=97=E3=81=AEProps?= =?UTF-8?q?=E3=80=81Context=E3=82=82=E7=BF=BB=E8=A8=B3=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/composition-api-setup.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 88bd0fa4..d2ae0aa7 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -13,7 +13,7 @@ それぞれの引数がどのように使われるのか、深く掘り下げてみましょう。 -### Props +### プロパティ `setup` 関数の 第一引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。 @@ -48,7 +48,7 @@ setup(props) { } ``` -### Context +### コンテキスト `setup` 関数に渡される第二引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。: