1- ## テンプレート参照
1+ # テンプレート参照
22
33> この節ではコード例で [ 単一ファイルコンポーネント] ( single-file-component.html ) の文法を使用しています。
44
5- > このガイドはすでに [ コンポジション API 導入] ( composition-api-introduction.html ) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
5+ > このガイドはすでに [ Composition API 導入] ( composition-api-introduction.html ) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
66
7- コンポジション API を使うとき、 [ リアクティブ参照] ( reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs ) と [ テンプレート参照] ( component-template-refs.html ) のコンセプトは同じになります。
8- テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [ setup()] ( composition-api-setup.html ) で返します。
7+ Composition API を使うとき、 [ リアクティブ参照] ( reactivity-fundamentals.html#独立したリアクティブな値を-参照-として作成する ) と [ テンプレート参照] ( component-template-refs.html ) のコンセプトは同じになります。テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [ setup()] ( composition-api-setup.html ) で返します。
98
109``` html
1110<template >
3433
3534ここでは、レンダーコンテキスト上に ` root ` 変数を公開し、` ref="root" ` を経由し ref で宣言された変数 と div 要素と束縛します。 仮想 DOM のパッチアルゴリズムの中で、 VNode の ` ref ` キーがレンダーコンテキストの ref に対応する場合、VNode の対応する要素またはコンポーネントインスタンスに ref の値が代入されます。これは仮想 DOM のマウント/パッチ処理中に実行されるので、テンプレート参照に値が代入されるのは初回レンダリング後になります。
3635
37- テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつコンポジション関数に渡す (または返す)ことができます。
36+ テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつ Composition 関数に渡す (または返す)ことができます。
3837
39- ### JSX での使用例
38+ ## JSX での使用例
4039
4140``` js
4241export default {
@@ -54,9 +53,9 @@ export default {
5453}
5554```
5655
57- ### Usage inside ` v-for `
56+ ## ` v-for ` 内部での使用
5857
59- コンポジション API のテンプレート参照を ` v-for ` 内部で使う場合、特別な処理はされません。代わりに、関数を使って ref に独自処理を行うようにします。
58+ Composition API のテンプレート参照を ` v-for ` 内部で使う場合、特別な処理はされません。代わりに、関数を使って ref に独自処理を行うようにします。
6059
6160``` html
6261<template >
@@ -86,3 +85,66 @@ export default {
8685 }
8786script >
8887```
88+
89+ ## テンプレート参照の監視
90+
91+ 変更のためテンプレート参照の監視をすることは、前の例で説明したライフサイクルフックの使い方に代わる方法です。
92+
93+ しかしライフサイクルフックとの重要な違いは、` watch() ` や ` watchEffect() ` の作用は、DOM がマウントされたり更新されたりする * 前に* 実行されるので、ウォッチャが作用を実行したときには、テンプレート参照は更新されていないということです:
94+
95+ ``` vue
96+ <template>
97+ <div ref="root">This is a root element</div>
98+ </template>
99+
100+ <script>
101+ import { ref, watchEffect } from 'vue'
102+
103+ export default {
104+ setup() {
105+ const root = ref(null)
106+
107+ watchEffect(() => {
108+ // この作用は DOM が更新される前に実行され、
109+ // 結果的にテンプレート参照は、まだ要素への参照を保持していません。
110+ console.log(root.value) // => null
111+ })
112+
113+ return {
114+ root
115+ }
116+ }
117+ }
118+ </script>
119+ ```
120+
121+ そのため、テンプレート参照を使うウォッチャは、 ` flush: 'post' ` オプションをつけて定義する必要があります。これにより、DOM が更新された * あとに* 作用が実行され、テンプレート参照が DOM と同期して、正しい要素を参照するようになります。
122+
123+ ``` vue
124+ <template>
125+ <div ref="root">This is a root element</div>
126+ </template>
127+
128+ <script>
129+ import { ref, watchEffect } from 'vue'
130+
131+ export default {
132+ setup() {
133+ const root = ref(null)
134+
135+ watchEffect(() => {
136+ console.log(root.value) // => <div></div>
137+ },
138+ {
139+ flush: 'post'
140+ })
141+
142+ return {
143+ root
144+ }
145+ }
146+ }
147+ </script>
148+ ```
149+
150+ * 参照: [ 算出プロパティとウォッチ] ( ./reactivity-computed-watchers.html#作用フラッシュのタイミング )
0 commit comments