vue nextickはいったいどうしたの?

nexttickは彼をjqueryの$(document)と理解することができる.ready(); nextick(callback)のコールバック関数は、現在のキューのすべての計算が完了し、render後の段階である.dom要素を操作できます
vueのdomレンダリングは同期ではなく非同期なので.dataが変更されると、vueはすぐにdomをレンダリングしません.dataを変更した後、dom要素をすぐに操作する必要がある場合、問題が発生します.nextickでレンダリング後のdomを取得します.
不bb上コードtemplete

  
        

              
{{a}}
        

script

data(){
   return{
      a:'cxk';
  }
},
mounted(){
   this.setP()
},
methods:{
    setP(){
        this.a = '  ';
        console.log(this.$refs.p.innerHTML);//cxk
        this.$nexttick(()=>{
              console.log(this.$refs.p.innerHTML);//  
        })
    },
}

具体的な原因はVueの公式文書で詳しく説明します.
VueはDOM更新を非同期で実行する.データの変化が観察される限り、Vueはキューを開き、同じイベントサイクルで発生したすべてのデータの変化をバッファリングします.同じwatcherが複数回トリガーされると、キューに1回のみプッシュされます.このようなバッファリング時に重複データを除去することは,不要な計算やDOM動作を回避する上で非常に重要である.次に、次のイベントループ「tick」で、Vueはキューをリフレッシュし、実際の(重複した)作業を実行します.Vueは内部で非同期キューに対してオリジナルのPromiseを使用することを試みる.thenとMessageChannelは,実行環境がサポートされていない場合にsettimeout(fn,0)を採用する.
例えばvmを設定するとsomeData='new value'で、このコンポーネントはすぐに再レンダリングされません.キューをリフレッシュすると、イベントループキューが空になったときにコンポーネントが次のtick更新されます.多くの場合、このプロセスに関心を持つ必要はありませんが、DOMステータスの更新後に何かをしたい場合は、少し難しいかもしれません.Vuejsは通常、開発者がDOMに直接接触しないように「データ駆動」に沿って考えることを奨励していますが、時にはそうする必要があります.データが変化する後にVueの更新DOMが完了するのを待つために、データが変化する直後にVueを使用することができる.nextTick(callback) .これにより、コールバック関数はDOM更新が完了すると呼び出されます.