vueにおける$nextTick()の役割

926 ワード

vue更新データは非同期です
1.0では確かにv-el:xxxでdomをマークし、コンポーネントでthis.$を通過します.els.xxxはこのdomオブジェクトを得ることができます
$nextTick(()=>{})この関数コールバックにDOM関連アクションが書き込まれ、DOMがレンダリングされていることを確認します.
Vueとは何ですか.nextTick()
公式文書は次のように解釈されています.
遅延コールバックは、次回のDOM更新サイクルが終了した後に実行される.データを修正した直後にこの方法を用いて,更新後のDOMを取得する.
この DOMのVueメソッドが派生しましたしたがって、Vue.nextTick()コールバック関数において実行されるべきはDOMを操作するjsコードであり、
いつ使うの?nextTick()
Vueライフサイクルのcreated()フック関数で行うDOM操作は、Vue.nextTick()のコールバック関数に必ず入れてください.なぜなら、created()フック関数が実行されている間にDOMは実際にはレンダリングされていないため、このときにDOM操作を行うのは無駄ではないので、ここでは必ずDOM操作のjsコードをVue.nextTick()のコールバック関数に入れなければならないからです.これに対応するmountedフック関数は、このフック関数の実行時にすべてのDOMマウントが完了したためである.使用タイミング:elが新しく作成されたvm.$elを置き換え、インスタンスにマウントした後、フック関数を呼び出します.ページはすべてレンダリングされません.
ある動作がDOM要素構造を変える可能性がある場合、DOMの一連のjs操作はVue.nextTick()のコールバック関数に入れなければならない.