VueのnextTick

最近、vueのdemoを書くときにswiperライブラリのローテーションを使いました.settimeoutシミュレーションで非同期取得データをロードしましたが、非同期取得データを見つけた後、swiperはロードに失敗し、ネット上でもこのような状況の原因を調べました.
swiperライブラリの使用方法は新しいswiperオブジェクトを確立しdomオブジェクトをロードするが、私たちは非同期またはデータを取得してvueのdataを修正した後、すぐにdomオブジェクトを更新しないので、このときvueが必要である.nexttick()です.nextTickはdom元
素が更新された後に呼び出されます.
 
これはnexttickに関する公式ドキュメントの説明です.
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更新が完了すると呼び出されます.
以上の説明から、nexttickのアプリケーションシーンを大体知ることができます.vueでdom要素を使用する必要がある場合にこの方法を呼び出します.例:
 
　

<span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
   data(){
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;">{
        }
   },
   methods:{
        test:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">this</span>.$nextTick(()=><span style="color: #000000;">{

                })
            }
    }  
}
</span>


                                        

nexttick内の矢印関数はdom要素の更新後に実行する関数です.