vueフレームワークのnextTickについて

1100 ワード

vueのデータの傍受は同期ですか、それとも非同期ですか.どのようにしてデータを傍受しますか?
nextTick()とは
nextTickは、次回のDOMツリー更新時にコールバック関数を遅延するトリガである.最初の質問の答えは:1.非同期2.nextTick()
nextTick()をいつ使用するか
シーン1.义齿
createdフック関数でdomを操作する場合.createdではdomツリーがレンダリングするため、domツリーの操作は無駄であり、このときdomツリーを操作するにはnexttickに操作内容を置くしかない、すなわちdomツリーが更新されたときに実行する.
created(){
  let that = this //    this    
  that.$nextTick(function(){
      //dom  
  })
}

シーン2.データを更新したら直ちにjsで認識図を操作する
//    dom     
data:{testMsg:"   "},
methods:{
changeTxt(){
      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        ");
        }
      });
    }}

シーン3.サードパーティ製プラグインを使用する場合
サードパーティ製プラグインの中にはdomツリーのリフレッシュ後に適用するものもあります.