vue.nexttickとは何ですか

vue.nexttick は、更新された DOM を取得する Vue メソッドです。nextTick メソッドは、次回 dom がデータを更新するとき、つまり、データが更新されて dom にレンダリングされるときまで、コールバック関数を遅延させます。を指定すると、nextTick 関数が自動的に実行されます。

#このチュートリアルの動作環境: Windows10 システム、vue バージョン 2.9、thinkpad t480 コンピューター。

推奨: 「

vue チュートリアル 」

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() のコールバック関数に配置する必要があります。 created() フック関数が実行されるとき、実際にはレンダリングは実行されず、このときの 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('h').innerText; 
        console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    },

Vue.nextTick(callback) 使用原則:

その理由は、Vue が dom 更新を非同期で実行するためです。データの変更が観測されると、Vue はキューを開き、同じイベント ループでデータの変更を観測するウォッチャーをこのキューにプッシュします。このウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。このバッファリング動作により、重複データによって引き起こされる不必要な計算や DOm 操作を効果的に排除できます。次のイベント ループでは、Vue はキューをクリアし、必要な DOM 更新を実行します。 vm.someData = 'new value' と設定すると、DOM はすぐには更新されませんが、非同期キューがクリアされたとき、つまり次のイベント ループが開始されたときに必要な DOM が更新されます。更新します。この時点で、更新された DOM 状態に基づいて何かを実行したい場合、問題が発生します。 。データ変更後に Vue が DOM の更新を完了するのを待つには、データ変更直後に Vue.nextTick(callback) を使用します。このコールバック関数は、DOM の更新が完了した後に呼び出されます。

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