Mengapakah pemaparan tak segerak vue?

Sebab: Boleh meningkatkan prestasi. Jika kemas kini tak segerak tidak digunakan, komponen semasa akan dipaparkan semula setiap kali data dikemas kini, jadi atas sebab prestasi, Vue akan mengemas kini paparan secara tidak segerak selepas pusingan kemas kini data ini, dan bukannya mengemas kini serta-merta apabila terdapat kemas kini data; pandangan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

1. Prinsip dan fungsi nextTick()

nextTick memastikan DOM yang kami kendalikan dikemas kini.

(1) Senario aplikasi : Selepas paparan dikemas kini, kendalikan berdasarkan paparan baharu.

• Operasi yang dilakukan selepas data berubah, dan operasi ini perlu menggunakan struktur DOM yang berubah dengan perubahan data, operasi ini Ia perlu untuk diletakkan dalam fungsi panggil balik nextTick().
• Jika anda melakukan operasi DOM dalam cangkuk create(), dom belum diberikan dalam create(), mesti diletakkan dalam fungsi panggil balik nextTick().
• Vue menerima pakai idea pandangan dipacu data, tetapi dalam beberapa kes, DOM masih perlu dimanipulasi. Kadangkala, data DOM1 berubah dan DOM2 perlu mendapatkan data daripada DOM1, kemudian anda akan mendapati bahawa paparan DOM2 belum dikemas kini, maka anda perlu menggunakan nextTick.

(2) Prinsip:

• Inti nextTick adalah untuk gunakan kaedah JS Asli seperti Promise, MutationObserver, setImmediate dan setTimeout digunakan untuk mensimulasikan pelaksanaan tugas mikro/makro yang sepadan
• pada asasnya untuk gunakan JS Barisan tugasan panggil balik tak segerak ini datang untuk melaksanakan baris gilir panggil balik tak segeraknya sendiri dalam rangka kerja Vue
• pada asasnya adalah aplikasi pelaksanaan JS; gelung peristiwa prinsip

nextTick ialah contoh tipikal untuk menggunakan prinsip pelaksanaan JS yang mendasari kes tertentu Sebab untuk memperkenalkan mekanisme baris gilir kemas kini tak segerak ∶

Jika

tidak menggunakan kemas kini tak segerak, maka akan memaparkan semula komponen semasa setiap kali data dikemas kini. JadiAtas sebab prestasi, Vue akan mengemas kini paparan secara tidak segerak selepas pusingan kemas kini data ini. Daripada mengemas kini paparan serta-merta apabila data dikemas kini.

• Untuk memanipulasi DOM selepas operasi kemas kini data, kami boleh menggunakan sejurus selepas data berubah; >nextTick(callback)nextTick() menangguhkan panggilan balik ke
apabila gelung acara seterusnya bermula
• , supaya fungsi panggil balik akan dipanggil selepas kemas kini DOM selesai dan anda boleh mendapatkannya Elemen DOM terkini. Apabila anda menetapkan vm.someData = 'nilai baharu', DOM tidak akan dikemas kini serta-merta, tetapi akan dikosongkan dalam baris gilir tak segerak, iaitu, Kemas kini DOM yang diperlukan akan dilakukan hanya apabila kemas kini
dilaksanakan pada permulaan gelung acara seterusnya.

(3) strategi penurunan taraf vue

Vue secara dalaman cuba baris tak segerak Gunakan asli

Promise.then, MutationObserver

dan setImmediate Jika persekitaran pelaksanaan tidak menyokongnya, setTimeout(fn, 0) akan digunakan sebaliknya untuk pemprosesan turun taraf. Tujuan pemprosesan turun taraf adalah untuk meletakkan fungsi ke dalam baris gilir microtask atau macrotask dan menunggu pelaksanaan dalam gelung acara seterusnya Anda boleh memuat semula baris gilir. flushCallbacks dimuat semula dalam microtask gelung acara ini atau

dimuatkan semula dalam gelung acara seterusnya

. Ini bergantung pada persekitaran pelaksanaan semasa kod Jika persekitaran pelaksanaan semasa menyokong janji, maka nextTick sebenarnya akan menggunakan Promise untuk melaksanakan secara dalaman, dan kemudian muat semula baris gilir akan dilaksanakan dalam microtask gelung acara ini. . Sebab untuk memberi keutamaan kepada microtask: Mengemas kini baris gilir

dalam

microtask akan dilakukan kurang daripada sekali dalam macrotask untuk pemaparan UI. 2 Mengapa Vue menggunakan pemaparan tak segerak

vue ialah kemas kini peringkat komponen ,

komponen Apabila data di dalam berubah, komponen akan dikemas kini

. Contoh: this.a = 1, this.b=2 (pemerhati yang sama)

(1) Sebab: Jika tidak menggunakan kemas kini tak segerak , maka akan memaparkan semula komponen semasa setiap kali data dikemas kini. JadiAtas sebab prestasi, Vue akan mengemas kini paparan secara tidak segerak selepas pusingan kemas kini data ini. Daripada mengemas kini paparan serta-merta apabila data dikemas kini.

(2) Proses:

• Vue melakukan kemas kini dom secara tidak segerak perubahan diperhatikan, Vue akan membuka baris gilir, dan kemudian menolak pemerhati yang memerhati perubahan data dalam gelung peristiwa yang sama ke dalam baris gilir ini.

• Jika pemerhati ini dicetuskan beberapa kali, ia hanya akan ditolak ke baris gilir sekali. Tingkah laku penimbalan ini boleh mengalih keluar data pendua dengan berkesan dan mengelakkan pengiraan dan operasi DOM yang tidak perlu.

• Dan dalam gelung acara seterusnya, Vue akan mengosongkan baris gilir dan melaksanakan kemas kini DOM yang diperlukan.

3) Analisis kod sumber:

• Apabila data perubahan , maklumkan pemerhati untuk melakukan operasi kemas kini melalui pemberitahuan

• Panggil kemas kini pemerhati secara berurutan melalui subs[i].kemas kini (pandangan bukan dikemas kini);

• Letakkan pemerhati ke dalam baris gilir tiada dalam baris gilir, pemerhati akan dipadamkan pada baris gilir (pandangan tidak dikemas kini); muat semula baris gilir pemerhati (kemas kini paparan); >pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Mengapakah pemaparan tak segerak vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!