Perbandingan fungsi Vue: penggunaan toRaw() dan markRaw()

Artikel ini akan membantu anda mempelajari fungsi vue dan membandingkan fungsi toRaw dan markRaw dalam vueJs saya harap ia akan membantu anda!

Untuk beberapa keperluan khas, dalam projek, adalah perlu untuk menukar data responsif kepada data jenis primitif biasa.

Dalam Vue, data jenis data biasa boleh ditukar kepada data responsif pada masa yang sama, data jenis responsif juga boleh ditukar kepada data jenis biasa

boleh digunakan untuk menambah baik data. Prestasi fungsi

toRaw()

menerima reactive data responsif, menukar data responsif kepada data jenis biasa dan menukarnya kepada data tidak responsif, yang setara kepada Objek pemulihan, reactive bersamaan dengan pengeluaran, tetapi tidak berfungsi untuk ref data responsif. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Tukar objek responsif yang dijana oleh reactive kepada objek biasa (asal)

toRaw() boleh mengembalikan objek asal yang sepadan dengan proksi yang dibuat oleh reactive(), readonly(), shallowReactive() atau shallowReadonly()

Ini ialah bacaan sementara yang boleh digunakan tanpa mencetuskan proksi Akses/penjejakan overhed, atau kaedah khas penulisan tanpa mencetuskan perubahan, dalam dokumentasi rasmi, tidak disyorkan untuk menyimpan rujukan berterusan kepada objek asal

Senario penggunaan: untuk membaca Dapatkan objek biasa objek responsif Semua operasi pada objek biasa ini tidak akan menyebabkan halaman dikemas kini

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo)  // true

Nota

Untuk objek, kemas kini dinamik seterusnya Jika keseluruhan objek tidak didedahkan kepada dunia luar, pembolehubah yang baru ditambah dalam templat tidak akan berkuat kuasa (untuk setup bentuk fungsi)

markRaw() fungsi

menerima data Asal, menandakan objek supaya ia tidak akan menjadi objek responsif lagi, iaitu, walaupun data diubah suai dalam logik, halaman tidak akan dikemas kini

Tandakan objek sebagai tidak Proksi ditukar, mengembalikan objek itu sendiri

Senario aplikasi:

[1]. perpustakaan atau VueObjek komponen

[2]. Apabila memaparkan senarai besar dengan sumber data tidak berubah, melangkau transformasi reaktif boleh meningkatkan prestasi

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

markRaw() lwn. shallowReactive()Ini pendekatan cetek API membolehkan anda memintas secara terpilih tindak balas dalam/penukaran baca sahaja lalai dan membenamkan objek mentah bukan proksi dalam spektrum keadaan

Jika anda meletakkan bersarang , tetapkan objek asal tanpa teg ke dalam objek reaktif, dan kemudian mengaksesnya semula, apa yang anda dapat ialah versi proksi, yang mungkin membawa kepada risiko identiti objek

iaitu, lakukan operasi yang bergantung pada identiti objek, Tetapi versi asal dan versi proksi objek yang sama digunakan pada masa yang sama

const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象，但 foo.nested 却没有
  nested: foo.nested
})

console.log(foo.nested === bar.nested) // false

Ringkasan

ref() dan reactive() adalah untuk menukar data jenis tidak responsif kepada data responsif dan toRaw() dan markRaw() adalah bersamaan dengan pemulihan data responsif, menukar data responsif kepada data tidak responsif

dan toRaw hanya berfungsi untuk data jenis objek responsif Apabila ia datang untuk menukar responsif data ke dalam data tidak responsif, yang hanya digunakan untuk pemaparan data tulen dan tidak menyebabkan kemas kini halaman, anda boleh menggunakan toRaw atau markRaw()

yang selalunya boleh meningkatkan prestasi data >

(Mempelajari perkongsian video:

tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Perbandingan fungsi Vue: penggunaan toRaw() dan markRaw(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!