Prinsip responsif yang mendalam
Kami telah membicarakan sebagian besar konten dasar, dan sekarang kami akan berbicara tentang konten yang mendasarinya. Salah satu fitur paling signifikan dari VUE.js adalah sistem respons - model ini hanyalah objek normal, dan memodifikasinya akan memperbarui tampilan. Ini membuat manajemen negara sangat sederhana dan intuitif, tetapi memahami prinsip -prinsipnya juga penting dan dapat menghindari beberapa masalah umum. Selanjutnya, kita akan mulai menggali jauh ke dalam detail yang mendasari sistem respons VUE.js.
Cara melacak perubahan
Melewati objek normal ke instance VUE sebagai opsi datanya, Vue.js akan melintasi propertinya dan mengubahnya menjadi Getter/Setter dengan Object.defineproperty. Ini adalah fitur ES5 dan tidak dapat diimplementasikan dengan tambalan. Inilah sebabnya mengapa vue.js tidak mendukung IE8 dan lebih rendah.
Pengguna tidak dapat melihat getters/setter, tetapi secara internal mereka membiarkan VUE.js melacak dependensi, memberi tahu perubahan ketika properti diakses dan dimodifikasi. Satu masalah adalah bahwa pemformatan Getter/Setter berbeda saat mencetak objek data pada konsol browser, dan menggunakan metode instance VM. $ Log () bisa mendapatkan output yang lebih ramah.
Setiap instruksi/pengikatan data dalam templat memiliki objek pengamat yang sesuai, yang mencatat atribut sebagai dependensi selama proses perhitungan. Setelah itu, ketika setter dependen dipanggil, penghitung ulang pengamat akan dipicu, yang juga akan menyebabkan instruksi terkait untuk memperbarui DOM.
Ubah masalah deteksi
Karena pembatasan ES5, Vue.js tidak dapat mendeteksi penambahan atau penghapusan sifat objek. Karena Vue.js mengubah properti menjadi Getter/Setter saat menginisialisasi instance, properti harus berada pada objek data untuk memungkinkan Vue.js mengonversinya agar responsif. Misalnya:
var data = {a: 1} var vm = vue baru ({data: data}) // `vm.a` dan` data.a` sekarang responsif vm.b = 2 // `vm.b` tidak responsif data.b = 2 //` data.b` tidak responsifNamun, ada cara untuk menambahkan atribut setelah pembuatan instance dan membuatnya responsif.
Untuk Vue Instances, Anda dapat menggunakan metode instance $ set (tombol, nilai):
vm. $ set ('b', 2) // `vm.b` dan` data.b` sekarang responsifUntuk objek data normal, metode global vue.set (objek, kunci, nilai):
Vue.set (data, 'c', 3) // `vm.c` dan` data.c` sekarang responsif
Terkadang Anda ingin menambahkan beberapa properti ke objek yang ada, seperti menggunakan objek.assign () atau _.extend () untuk menambahkan properti. Namun, properti baru yang ditambahkan ke objek tidak memicu pembaruan. Saat ini, Anda dapat membuat objek baru, termasuk properti objek asli dan properti baru:
// Jangan gunakan `object.assign (this.someObject, {a: 1, b: 2})` this.someObject = object.assign ({}, this.someObject, {a: 1, b: 2})Ada juga beberapa masalah terkait array yang telah dibahas dalam rendering daftar sebelumnya.
Inisialisasi data
Meskipun Vue.js menyediakan API untuk secara dinamis menambahkan atribut respons, disarankan untuk mendeklarasikan semua atribut respons pada objek data.
Jangan lakukan ini:
var vm = new vue ({template: '<verv> {{msg}} </div>'}) // Kemudian tambahkan `msg`vm. $ set ('msg', 'halo!')Lakukan ini:
var vm = vue baru ({data: {// mendeklarasikan `msg` msg: ''}, template: '<verv> {{msg}} </div>'}) // lalu atur` msg`vm.msg = 'hello!'Ada dua alasan untuk melakukan ini:
1. Objek data seperti skema status komponen. Mendeklarasikan semua properti di dalamnya membuat kode komponen lebih mudah dipahami.
2. Menambahkan properti respons tingkat atas memaksa semua pengamat untuk menghitung ulang karena tidak ada sebelumnya dan tidak ada pengamat yang melacaknya. Kinerja ini biasanya dapat diterima (terutama dibandingkan dengan pemeriksaan kotor Angular), tetapi dapat dihindari pada inisialisasi.
Antrian Pembaruan Asynchronous
Vue.js default untuk secara tidak sinkron memperbarui DOM. Setiap kali perubahan data diamati, Vue memulai antrian untuk menyimpan semua perubahan data dalam loop peristiwa yang sama. Jika seorang pengamat dipecat beberapa kali, itu hanya akan didorong ke antrian sekali. Tunggu sampai loop acara berikutnya, Vue akan menghapus antrian dan hanya melakukan pembaruan dom yang diperlukan. MutationObserver lebih disukai dalam antrian asinkron internal, dan setTimeout (Fn, 0) digunakan jika tidak didukung.
Misalnya, dengan set vm.somedata = 'nilai baru', DOM tidak akan segera diperbarui, tetapi akan memperbarui saat berikutnya loop acara menghapus antrian. Kami pada dasarnya tidak perlu peduli dengan proses ini, tetapi itu akan membantu jika Anda ingin melakukan sesuatu setelah status DOM diperbarui. Meskipun Vue.js mendorong pengembang untuk mengikuti pendekatan berbasis data dan menghindari secara langsung memodifikasi DOM, kadang-kadang terjadi. Untuk menunggu Vue.js menyelesaikan pembaruan DOM setelah perubahan data, Anda dapat menggunakan vue.nexttick (callback) segera setelah data berubah. Panggilan balik dipanggil setelah pembaruan DOM selesai. Misalnya:
<Div id = "example"> {{msg}} </div>
var vm = vue baru ({el: '#example', data: {msg: '123'}}) vm.msg = 'pesan baru' // Modifikasi data vm. $ el.textContent === 'pesan baru' // falsevue.nexttick (function () {vm. $ el.textcontent =========================== 'MESSICE () {vm. $ vm.Metode instan ini lebih nyaman karena tidak memerlukan vue global, dan panggilan balik ini secara otomatis terikat pada instance VUE saat ini:
Vue.component ('example', {template: '<span> {{msg}} </span>', data: function () {return {msg: 'not update'}}, metode: {updateMessage: function () {this.msg = 'update' console.log (ini. () {console.log (ini. $ el.textContent) // => 'diperbarui'})}}})Rahasia atribut komputasi
Anda harus mencatat bahwa sifat yang dihitung dari Vue.js bukanlah getters sederhana. Properti komputasi terus melacak dependensi responsnya. Saat menghitung properti yang dihitung, Vue.js memperbarui daftar ketergantungannya dan menyimpan hasilnya. Hasil yang di -cache tidak valid hanya ketika salah satu dependensi berubah. Oleh karena itu, selama ketergantungan tidak berubah, mengakses properti yang dihitung akan secara langsung mengembalikan hasil yang di -cache alih -alih menelepon Getter.
Mengapa cache? Misalkan kita memiliki properti perhitungan A, yang akan mengulangi melalui array raksasa dan melakukan banyak perhitungan. Kemudian, mungkin ada properti lain yang dihitung yang bergantung pada A. Jika tidak ada cache, kami akan menyebut A Getter berkali -kali, lebih dari yang diperlukan.
Karena properti yang dihitung di -cache, Getter tidak selalu dipanggil saat mengaksesnya. Pertimbangkan contoh berikut:
var vm = vue baru ({data: {msg: 'hai'}, dihitung: {contoh: function () {return date.now () + this.msg}}})Contoh properti yang dihitung hanya memiliki satu ketergantungan: VM.MSG. Date.now () bukan ketergantungan respons karena tidak ada hubungannya dengan sistem pengamatan data VUE. Oleh karena itu, saat mengakses VM.Example, cap waktu akan ditemukan tetap tidak berubah kecuali VM.MSG berubah.
Terkadang saya berharap bahwa Getter tidak mengubah perilaku asli dan menelepon Getter setiap kali saya mengakses VM.Example. Pada saat ini, cache dapat dimatikan untuk atribut yang dihitung yang ditentukan:
dihitung: {contoh: {cache: false, get: function () {return date.now () + this.msg}}}Sekarang setiap kali Anda mengakses VM.Example, cap waktu baru. Namun, mengakses di JavaScript sama seperti ini; Ikatan data masih didorong oleh dependensi. Jika atribut yang dihitung {{contoh}} terikat dalam modul, DOM hanya akan diperbarui jika ketergantungan respons berubah.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.