vueでのnexttickの使い方は何ですか-Vue.js-php.cn

vueでのnexttickの使い方は何ですか

WBOY

リリース： 2022-03-17 16:03:14

オリジナル

3231 人が閲覧しました

vue では、nexttick() を使用して、次の DOM 更新データの後に呼び出されるコールバック関数を遅延させます。次の DOM 更新サイクルが終了した後に遅延コールバックを実行し、それを使用して更新された DOM を取得できます。データ変更後の構文は「Vue.nextTick([callback,context])」です。

vueでのnexttickの使い方は何ですか

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue での nexttick の使用法とは何ですか

定義: 次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。データを変更した直後にこのメソッドを使用して、更新された DOM を取得します。

そこで、更新された DOM を取得するこの Vue メソッドが派生しました。したがって、Vue.nextTick() コールバック関数に配置される実行は、DOM を操作する js コードである必要があります。

理解: nextTick() は、次回 DOM がデータを更新するまでコールバック関数を遅延させます。簡単に理解すると、データが更新され、DOM 内でレンダリングされると、関数が自動的に実行されます。

<template>
  <div class="hello">
    <div>
      <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      console.log(that.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>

ログイン後にコピー

Use this.$nextTick()

  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }
  }

ログイン後にコピー

注意: Vue は、データが変更されると、DOM はすぐに変更されますが、DOM は特定の戦略に従って更新されます。 $nextTick は、次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。データを変更した後に $nextTick を使用すると、コールバックで更新された DOM を取得できます。

Vue を使用する必要があるのはどのような場合ですか。 nextTick()? ?

1. Vue ライフサイクルの created() フック関数によって実行される DOM 操作は、Vue.nextTick() のコールバック関数に配置する必要があります。実行されても、DOM は実際にはレンダリングを実行しておらず、この時点で DOM 操作を実行することは無駄に等しいため、DOM 操作用の JS コードを Vue.nextTick() のコールバック関数に入れる必要があります。これに対応するのがマウントされたフック関数です。このフック関数が実行される時点ですべての DOM のマウントが完了しているためです。

  created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },

ログイン後にコピー

2. プロジェクト内のDOM要素のデータを変更した後、新しいDOMに基づいて何かをしたい場合、新しいDOMに対する一連のjs操作をコールバック関数に入れる必要があります。 Vue.nextTick() ;一般的な理解は次のとおりです: データを変更した後、js を使用して新しいビューをすぐに操作したい場合は、これを使用する必要があります。

<template>
  <div class="hello">
    <h3 id="h">{{testMsg}}</h3>
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //vue数据改变，改变dom结构
      let domTxt=document.getElementById(&#39;h&#39;).innerText;  //后续js对dom的操作
      console.log(domTxt);  //输出可以看到vue数据修改后DOM并没有立即更新，后续的dom都不是最新的
      if(domTxt==="原始值"){
        console.log("文本data被修改后dom内容没立即更新");
      }else {
        console.log("文本data被修改后dom内容被马上更新了");
      }
    },
 
  }
}
</script>

ログイン後にコピー

正しい使用法は次のとおりです: vue.$ を使用します。 vue が dom 要素構造を変更した後の nextTick() メソッド dom データが更新された後に後続のコードの遅延実行を実装するには、

    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //修改dom结构
       
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById(&#39;h&#39;).innerText; 
        console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    },

ログイン後にコピー

3. サードパーティのプラグインを使用する場合は、 vue によって生成された dom ダイナミクスの一部が変更された場合にプラグインを適用するメソッドを使用する場合は、$nextTick のコールバック関数内でプラグインを再適用するメソッドを実行する必要があります。

Vue.nextTick(callback) 使用原則:

その理由は、Vue が dom 更新を非同期で実行するためです。データの変更が観察されると、Vue はキューを開き、それを同じキューに入れます。イベントループ内のデータ変更を監視するウォッチャーは、このキューにプッシュされます。このウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。このバッファリング動作により、重複データによって引き起こされる不必要な計算や DOm 操作を効果的に排除できます。次のイベントループでは、Vue はキューをクリアし、必要な DOM 更新を実行します。

vm.someData = 'new value' と設定すると、DOM はすぐには更新されませんが、非同期キューがクリアされたとき、つまり次のイベントループが開始されたときに必要な DOM が更新されます。更新します。この時点で更新された DOM の状態に基づいて何かを実行しようとすると、問題が発生します。。データ変更後に Vue が DOM の更新を完了するのを待つために、データ変更直後に Vue.nextTick(callback) を使用できます。このコールバック関数は、DOM の更新が完了した後に呼び出されます。

【関連する推奨事項:「vue.js チュートリアル」】

以上がvueでのnexttickの使い方は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。