Skip to content

update テンプレート参照の翻訳改善をしました #197

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.

Sign up for GitHub

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
Feb 16, 2021
Merged

update テンプレート参照の翻訳改善をしました #197

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 6 additions & 6 deletions src/guide/composition-api-template-refs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
> このガイドはすでに [コンポジション API 導入](composition-api-introduction.html) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。

コンポジション API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。
テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 変数を定義して [setup()](composition-api-setup.html) で返します。
テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [setup()](composition-api-setup.html) で返します。

```html
<template>
Expand All @@ -32,11 +32,11 @@
</script>
```

描画コンテキストに `root` 変数を渡していて、`ref="root"` 経由で div 要素と束縛します。 仮想 DOM のパッチアルゴリズムの中で、 もし VNode の `ref` キーは描画コンテキストの ref に対応すると、VNode の対応する要素またはコンポーネントインスタンスに ref の値が割り当てられます。これは仮想 DOM のマウント/パッチ処理中に実行されるので、テンプレート refs では初期描画に値だけを取得できます。
ここでは、レンダーコンテキスト上に `root` 変数を公開し、`ref="root"` を経由し ref で宣言された変数 と div 要素と束縛します。 仮想 DOM のパッチアルゴリズムの中で、 VNode の `ref` キーがレンダーコンテキストの ref に対応する場合、VNode の対応する要素またはコンポーネントインスタンスに ref の値が代入されます。これは仮想 DOM のマウント/パッチ処理中に実行されるので、テンプレート参照に値が代入されるのは初回レンダリング後になります。

テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつコンポジション関数に渡せる(または返せる)ことができます。
テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつコンポジション関数に渡す(または返す)ことができます。

### Usage with JSX
### JSX での使用例

```js
export default {
Expand All @@ -56,7 +56,7 @@ export default {

### Usage inside `v-for`

コンポジション API のテンプレート参照を `v-for` 内部で使う時には特別な処理はされないです。代わりに、参照を提供する関数を使って独自処理を実行してください。
コンポジション API のテンプレート参照を `v-for` 内部で使う場合、特別な処理はされません。代わりに、関数を使って ref に独自処理を行うようにします。

```html
<template>
Expand All @@ -73,7 +73,7 @@ export default {
const list = reactive([1, 2, 3])
const divs = ref([])

// 忘れずにアップデート前に ref をリセットしてください
// ref が各更新の前に必ずリセットされるようにしてください
onBeforeUpdate(() => {
divs.value = []
})
Expand Down