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