Membawa anda memahami lebih mendalam tentang Vue.$nextTick (analisis ringkas tentang prinsip)

Artikel ini akan berkongsi dengan anda pengetahuan tulen tentang Vue, memperkenalkan Vue.nextTick yang anda tidak tahu dan bercakap tentang prinsip Vue.$nextTick saya harap ia akan membantu semua orang!

Bahan prinsip akan mempunyai lebih banyak teks, sila bersabar dan nikmati dengan teliti

Mekanisme kemas kini DOM dalam Vue

Apabila anda menggunakan Vue secara agresif untuk mencapai matlamat anda, anda tiba-tiba mendapati bahawa, hei, saya jelas telah menukar data ini, tetapi apabila saya mendapatnya, ia adalah nilai terakhir (saya malas, Tiada contoh khusus?)

Pada masa ini, Vue akan berkata: "Kecil, anda tidak faham perkara ini, DOM saya dikemas kini secara tak segerak!!!"

Ringkasnya, tindak balas Vue tidak bermakna DOM berubah serta-merta selepas data berubah, tetapi mengemas kini DOM mengikut strategi tertentu. Kelebihan ini ialah ia boleh mengelakkan beberapa operasi yang tidak perlu pada DOM dan meningkatkan prestasi rendering. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

dijelaskan dalam dokumentasi rasmi Vue:

Mungkin Jika anda belum perasan lagi, Vue melakukan kemas kini DOM secara tidak segerak. Selagi perubahan data diperhatikan, Vue akan membuka baris gilir dan menampan semua perubahan data yang berlaku dalam gelung peristiwa yang sama. Jika pemerhati yang sama dicetuskan beberapa kali, ia hanya akan ditolak ke dalam baris gilir sekali. Penyahduplikasian data semasa penimbalan adalah sangat penting untuk mengelakkan pengiraan dan operasi DOM yang tidak perlu. Kemudian, pada gelung acara seterusnya "tanda", Vue mengepam baris gilir dan melaksanakan kerja sebenar (pendua).

Secara terang-terangan, ini sebenarnya berkait rapat dengan gelung peristiwa dalam JS Adalah mustahil untuk Vue membuat setiap perubahan data Ia akan meletakkan perubahan ini dalam baris gilir tak segerak. ia juga akan menyahgandakan operasi dalam baris gilir Contohnya, jika anda mengubah suai data tiga kali, ia hanya akan mengekalkan yang terakhir. Perubahan ini boleh disimpan dalam bentuk baris gilir Sekarang persoalannya datang, pada masa apakah dalam gelung peristiwa Vue mengubah suai DOM?

Vue mempunyai dua pilihan, satu ialah mengemas kini DOM pada penghujung gelung acara ini dan satu lagi ialah meletakkan kemas kini DOM dalam pusingan seterusnya gelung acara. zPada masa ini, You Yuxi menepuk dadanya dan berkata, "Saya mempunyai kedua-dua kaedah Walau bagaimanapun, kerana pelaksanaan akhir pusingan acara ini akan menjadi lebih cepat daripada pusingan acara seterusnya, Vue memberi keutamaan kepada kaedah pertama!" . , mekanisme kedua dicetuskan hanya apabila persekitaran tidak menyokongnya. (Pautan bermula dengan ?? membolehkan anda memahami gelung acara)

Walaupun prestasi telah banyak dipertingkatkan, masalah timbul pada masa ini Kita semua tahu bahawa dalam satu pusingan gelung acara, pelaksanaan kod masuk timbunan pelaksanaan segerak selesai Selepas itu, kandungan baris gilir tak segerak akan dilaksanakan, jadi operasi kami untuk mendapatkan DOM adalah segerak! ! Bukankah itu bermakna bahawa walaupun saya telah menukar data, kemas kininya adalah tidak segerak, dan apabila saya memperolehnya, ia tidak mempunyai masa untuk menukar, jadi masalah pada permulaan artikel akan berlaku.

Ini. . . Saya benar-benar perlu melakukan ini, jadi apa yang perlu saya lakukan? ?

Tidak mengapa, Youda sangat bertimbang rasa memberikan kami Vue.$nextTick()

Vue.$nextTick()

Malah, hanya satu ayat sudah cukup Mari kita jelaskan $nextTick dengan jelas: operasi yang anda masukkan $nextTick tidak akan dilaksanakan serta-merta, tetapi akan dilaksanakan selepas kemas kini data dan kemas kini DOM selesai, supaya apa yang kita dapat pasti akan menjadi yang terkini.

Untuk menjadi lebih tepat, kaedah $nextTick menangguhkan pelaksanaan panggilan balik sehingga kitaran kemas kini DOM seterusnya. (Jika anda tidak memahami ayat ini, anda boleh membaca [kepala anjing] di atas) Kita semua memahami maksud

, tetapi bagaimanakah $nextTick mencapai fungsi ajaib ini? Intinya adalah seperti berikut:

Vue secara dalaman cuba menggunakan Promise.then asli, MutationObserver dan setImmediate untuk baris gilir tak segerak Jika persekitaran pelaksanaan tidak menyokongnya, setTimeout(fn, 0) akan digunakan sebaliknya.

Lihat ayat ini dengan teliti, dan anda boleh mendapati bahawa ini bukan sahaja menggunakan baris gilir tugas panggil balik tak segerak JavaScript untuk melaksanakan baris gilir panggilan balik tak segerak anda sendiri dalam rangka kerja Vue. Ini sebenarnya adalah contoh biasa untuk menggunakan prinsip pelaksanaan JavaScript yang mendasari pada kes tertentu.

Biar saya ringkaskan di sini: $nextTickLetakkan fungsi panggil balik ke dalam tugasan mikro atau tugasan makro untuk melambatkan perintah pelaksanaannya; (Ringkasannya terlalu malas?)

Penting Perkara utama ialah memahami maksud tiga parameternya dalam kod sumber:

• panggilan balik: Operasi yang ingin kami lakukan boleh diletakkan dalam fungsi ini Kami akan meletakkan fungsi panggil balik ke dalam baris gilir tak segerak sebelum melaksanakannya sekali $nextTick; untuk menentukan sama ada ia adalah kali pertama untuk menyertai gelung acara Pelaksanaan tak segerak lekap baris gilir dicetuskan hanya apabila kali pertama ditambahkan
• pemasaFunc: digunakan untuk mencetuskan fungsi panggil balik pelaksanaan, iaitu,
Atau
• atau Promise.then atau MutationObserver Selepas memahami proses setImmediatesetTimeout
, melihat keseluruhan proses pelaksanaan dalam

, ia sebenarnya untuk menyekat fungsi panggil balik dalam setiap

Masukkan baris gilir panggilan balik, dan kemudian tunggu pelaksanaan mengikut sifat acara Apabila tiba gilirannya untuk melaksanakannya, laksanakannya dan kemudian alih keluar acara yang sepadan daripada baris gilir panggilan balik. $nextTick$nextTick

Gunakan

Setelah berkata begitu banyak, bagaimana untuk menggunakannya? Sangat mudah

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

Senario penggunaan

Operasi mendapatkan DOM dalam dicipta memerlukannya
ialah contoh kami di atas Jika anda ingin mendapatkan nilai terkini, gunakannya
Terdapat juga beberapa pemalam pihak ketiga, situasi penggunaan dan masalah khusus semasa penggunaan analisis
Rujuk

Jawapan terperinci kepada soalan temuduga lanjutan bahagian hadapan

Tambahan

I telah Saya tidak faham soalan

Memandangkan kaedah yang diluluskan telah ditukar kepada tugasan mikro, apakah susunan pelaksanaan antaranya dan tugasan mikro yang lain?

$nextTickIni hanyalah persoalan siapa yang melekapkan objek

dahulu Apabila kaedah

dipanggil, baris gilir pelaksanaan yang dikekalkan di dalam penutupnya akan dipasang pada objek Promise Apabila mengemas kini, $nextTick mula-mula akan melaksanakan kaedah Promise secara dalaman, dan kemudian melekapkan baris gilir pelaksanaan pada objek Vue Sebenarnya, selepas memahami model $nextTick Promise, kemas kini data juga dianggap sebagai dan memahami bahawa kaedah Js akan melaksanakan semua panggilan balik yang ditolak sekali gus, anda boleh memahami isu perintah pelaksanaan Event Loop$nextTick dan perbezaan antara $nextTick dan

ialah

Terdapat parameter konteks tambahan untuk menentukan konteks. Tetapi intipati kedua-duanya adalah sama $nextTick ialah kaedah contoh, dan nextTick hanyalah kaedah statik kelas Satu kelebihan kaedah contoh ialah ia terikat secara automatik kepada anda sebagai nextTick daripada contoh panggilan. $nextTicknextTick (Mempelajari perkongsian video: thisTutorial pengenalan Vuejs

,

Video pengaturcaraan asas)

Atas ialah kandungan terperinci Membawa anda memahami lebih mendalam tentang Vue.$nextTick (analisis ringkas tentang prinsip). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!