一目でわかる$nextTickの説明

1. 機能説明
2. 親コンポーネント
3. サブコンポーネント NextTick.vue
4なぜ未定義なのでしょうか?
5. v-if を v-show に変更するとフォーカスを取得できますか?
6. 実際の結果
7. コンポーネントをページに変換することでフォーカスを取得できますか?
8. $nextTickがあるのはなぜか
9. Vue.nextTick と this.$nextTick の違い
10. nextTickを使うためのちょっとしたコツ
要約する

1. 機能説明

今日は、この小さな機能を実装します。ページがレンダリングされた後、div 要素が表示されます。この div 要素をクリックすると、div 要素が消え、input 要素が表示され、input 要素がフォーカスされます。誰もが簡単だと思うと思いますので、見てみましょう〜

NextTick.vue という名前のコンポーネントを作成します。

ページ内での登録のご紹介

2. 親コンポーネント

<テンプレート>
  <div>
    <次のティック></次のティック>
  </div>
</テンプレート>

<script lang="ts">
「../components/NextTick.vue」からNextTickをインポートします。
エクスポートデフォルト{
  名前:"概要",
  コンポーネント:{
    次のティック
  },
}
</スクリプト>

3. サブコンポーネント NextTick.vue

<テンプレート>
    <div>
        <div>私はコンポーネントです</div>
        <div v-if="flag" class="sun" @click="handerClick">入力を表示</div>
        <input v-else ref="inputRef" class="yuelaing"/>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            フラグ:true、
        }
    },
    メソッド: {
        ハンドラークリック(){
            this.flag=false;
            this.$refs.inputRef.focus();
        },
    },
}
</スクリプト>

4なぜ未定義なのでしょうか?

this.flag=false;
this.$refs.inputRef.focus();

ページ操作を実行するときは、this.$refs.inputRef.focus();

時間がかかります（まだ更新されていないため、まだ古いページです）

現時点では DOM 要素は取得されていません。

したがって、エラーが報告されます。

解決策1:

ページに要素を取得させるだけです。setTimeoutを使用します。

タイムアウトを設定します(()=>{
      this.$refs.inputRef.focus();
},100)

この問題は次のように対処することが可能です。

しかし、それは非常に非専門的であるように思われます。

解決策2:

// コンポーネントが最新のデータに従ってビューに再レンダリングされると、関数 this.$nextTick(()=>{
    this.$refs.inputRef.focus();
})

5. v-if を v-show に変更するとフォーカスを取得できますか?

「v-if は動的に作成および破棄されるため、作成と破棄のプロセスには時間がかかります。」と言う人もいます。これが v-if が要素ノードを取得できない理由であり、v-show を使用することでこれを回避できます。

あなたの言ったことは意味があると思いますか?

v-ifをv-showに置き換えてみましょう

<テンプレート>
    <div>
        <div>私はコンポーネントです</div>
        <div v-show="flag" class="sun" @click="handerClick">入力を表示</div>
        <input v-show="!flag" ref="inputRef" class="yuelaing"/>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            フラグ:true、
        }
    },
    メソッド: {
        ハンドラークリック(){
            this.flag=false;
            console.log( this.$refs.inputRef );
            this.$refs.inputRef.focus();
        },
    },
}
</スクリプト>

6. 実際の結果

ページはエラーを報告しなかったものの、フォーカスが合っていなかったことが分かりました。v-showに変更しても、この問題は明らかに解決しませんでした。

この問題の原因は、子コンポーネントでthis.flag=falseの後に、次のコードがすぐに実行されることです。

this.$refs.inputRef.focus();

しかし、実行すると、ビューはまだ更新されておらず、まだ古いページであり、この時点では DOM 要素を取得できないため、 undefined が表示されます。そのため、遅延を追加した後にフォーカスできます。

コンポーネントが最新のデータに基づいてビューに再レンダリングされると、内部の関数が実行されます。

これは$nextTickの基本的な使い方です

this.$nextTick(()=>{
    this.$refs.inputRef.focus();
})

7. コンポーネントをページに変換することでフォーカスを取得できますか?

他にも、子コンポーネントなので、子コンポーネントは親コンポーネントの後にレンダリングされるという意見もあります。したがって、要素ノードは取得されませんでした。

これも理由の一つです...

疑問を解消するために、前の友人が言ったことは正しくないような気がします。サブコンポーネントをページに変換して、

<テンプレート>
  <div>
    <div>私はコンポーネントです</div>
    <div v-show="flag" class="sun" @click="handerClick">入力を表示</div>
    <input v-show="!flag" ref="inputRef" class="yuelaing"/>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
        フラグ:true、
    }
  },
  メソッド: {
      ハンドラークリック(){
        this.flag=false;
        this.$refs.inputRef.focus();
      },
  },
}
</スクリプト>

それでもまだ動作しないことがわかりました。これは、データを更新した後、Vue がリアルタイムで更新されないことを完全に示しています。

データが更新されてからページに表示されるまでには時間差があり、その時間差内でページデータを呼び出しても取得できません。

言い換えると、VueはDOMを更新するときに非同期に実行されます。

8. $nextTickがあるのはなぜか

$nextTickの理由は、Vueのデータが変更された後、ビューのDOMがすぐに更新されず、DOMの更新に時間がかかるためです。

ちょっとした実験を通してこれを見てみましょう

<テンプレート>
  <div>
    <div ref="ユニーク">
      <h1>{{ 続き }}</h1>
    </div>
    <div class="sun" @click="handerClick">値を変更</div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      続き:「私はデフォルト値です」
    }
  },
  メソッド: {
      ハンドラークリック(){
        this.cont = 'デフォルト値を変更しました';
        console.log('1==>',this.$refs.unique.innerText);
        this.$nextTick(()=>{
          console.log('2==>',this.$refs.unique.innerText);
        })
      },
  },
}
</スクリプト>

最初の値と 2 番目の値が異なることがわかりました。これは、ビュー上の DOM の更新がその間に必要だったためです。この差の範囲内で要素の値を取得しますが、それはまだ古い値です。つまり、最初の値は初期値で、2 番目の値は変更された値です。

データを更新したいので、DOMの値をすぐに取得できます。

そこでvueはこの問題を解決するために$nextTickを提供しています

9. Vue.nextTick と this.$nextTick の違い

Vue.nextTickはグローバルメソッドです

this.$nextTick( [callback] ) はインスタンスメソッドです。

ページには複数のインスタンスが存在する可能性があることは誰もが知っています。つまり、this.$nextTick は特定のインスタンスに対して正確である可能性があります。実際のところ、この 2 つは本質的に同じです。
唯一の違いは、一方がグローバルであり、もう一方が特定のインスタンスに正確であることです。精度が違います。

10. nextTickを使うためのちょっとしたコツ

ライフサイクルマウントがレンダリングされるときに、すべてのサブコンポーネントがレンダリングされることが 100% 保証されるわけではないことは誰もが知っているので、mounted で this.$nextTick を使用して、すべてのサブコンポーネントがレンダリングされることを確認できます。

マウントされたフックは、サーバー側のレンダリング中には呼び出されません。

マウント: 関数 () {
  this.$nextTick(関数() {
    //データが変更されると、
    // ビューを再レンダリングした後、内部のメソッドを実行します // この文は次の文と同等です:
   // 次の DOM 更新サイクルまでコールバックを遅延します // 同等: データの変更後、DOM が更新されるまで待ってから実行します })
}