Vue.nextTickの正しい使い方について理解しています。


作者について
プログラム開発者は、言語や技術にこだわらず、現在は主にPHPと先端の開発に従事しています。適性と適性が一番完璧な追求です。
個人サイト:http://www.linganmin.cn
最近、携帯電話のオンライン放送のH 5映画ステーションを書きました。http://www.ifilm.ltd
Vue.nextTickとは何ですか?
公式文書の説明は以下の通りです。
次回のDOM更新サイクルが終了したら、遅延コールを行います。データを修正した直後にこの方法を使用して、更新後のDOMを取得します。
私が理解している公式文書のこの文の重点は最後の文の DOMで、更新後のDOMの言外の意味を取得するにはどのような操作が必要ですか?更新後のDOMを使って前のDOMを使ったり、更新前のDOMを使ったり、問題があったりして、この DOMのVue方法が生まれました。したがって、Vue.nextTick()コールバック関数において実行されるべきは、Swiper拡張パケットなど、DOMを動作させることができるjsコードである。
var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    paginationClickable: true,
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false
                });
いつ使うべきですか?Vue.nextTick()
  • あなたがVueライフサイクルのcreated()フック関数で行ったDOM動作は必ずVue.nextTick()のコールバック関数に置いてください。原因は何ですか?created()フック関数が実行されている間に、DOMは実際にレンダリングされていません。このときDOM動作をするのは無駄と同じです。したがって、ここでは必ずDOM動作のjsコードをVue.nextTick()のコールバック関数に入れます。これに対応するのはmountedフック関数です。このフック関数は、すべてのDOMマウントとレンダリングが完了しているので、このとき、このフック関数ではどのDOM動作も大丈夫です。
  • は、データの変化後に実行される であり、この は、データの変化に伴って変化するDOM構造を使用する必要があるとき、この は、Vue.nextTick()のコールバック関数に入れるべきである。
  • 原因は、Vueは非同期でdom更新を行い、データの変化を観察すると、Vueは列を開け、同じイベントサイクル(event loop)の中でデータの変化を観察したウオッチをこの列に押し込むからです。このウォッチが何度か触発されたら、一度だけ列に送られます。このようなバッファリングは繰り返しデータによる不要な計算とDOm操作を効果的に除去することができる。次のイベントのサイクルでは、Vueは列をクリアし、必要なDOMの更新を行います。vm.someData='new value'を設定すると、DOMはすぐに更新されるのではなく、非同期キューがクリアされ、つまり次のイベントサイクルが開始される時に更新が必要なDOM更新が行われます。この時、あなたが更新したDOMの状態によって何かをしようとすると、問題が発生します。データの変化後にVueの更新が完了するのを待つために、データの変化後すぐにVue.nextTickを使うことができます。このようにコールバック関数はDOM更新が完了すると呼び出されます。
    安小学生