Konstruktor dan siklus hidup yang harus dipelajari setiap hari.

Konstruktor

Setiap aplikasi Vue.js dimulai dengan membuat instance root vue melalui konstruktor Vue:

 var vm = vue baru ({// options})

Contoh VUE sebenarnya adalah viewmodel yang dijelaskan dalam mode MVVM - sehingga nama variabel VM sering digunakan dalam dokumen.

Saat instantiating VUE, Anda perlu meneruskan objek opsi, yang dapat berisi opsi seperti data, templat, pemasangan elemen, metode, kait siklus hidup, dll. Semua opsi dapat dilihat dalam dokumentasi API.

Konstruktor Vue dapat diperluas untuk membuat konstruktor komponen yang dapat digunakan kembali dengan opsi yang telah ditentukan:

 var mycomponent = vue.extend ({// opsi ekstensi}) // semua `mycomponent` instance akan dibuat dengan opsi ekstensi yang telah ditentukan var myComponentInstance = myComponent baru ()

Meskipun instance ekstensi dapat dibuat secara imperatif, dalam kebanyakan kasus konstruktor komponen terdaftar sebagai elemen khusus dan kemudian digunakan secara deklaratif dalam templat. Kami akan menjelaskan sistem komponen secara rinci nanti. Sekarang Anda hanya perlu tahu bahwa semua komponen Vue.js sebenarnya adalah instance VUE yang diperluas.

Properti dan Metode

Setiap instance VUE akan proksi semua properti dalam objek datanya:

 var data = {a: 1} var vm = vue baru ({data: data}) vm.a === data.a // -> true // pengaturan properti juga akan mempengaruhi data asli vm.a = 2data.a // -> 2 // ... sebaliknya data.a = 3vm.a // -> 3

Perhatikan bahwa hanya atribut proxy ini yang responsif. Jika properti baru ditambahkan ke instance setelah instance dibuat, itu tidak memicu pembaruan tampilan. Kami akan membahas sistem respons secara rinci nanti.

Selain atribut data ini, vue instances mengekspos beberapa atribut dan metode instance yang berguna. Properti dan metode ini memiliki awalan $ untuk membedakan dari atribut data proxy. Misalnya:

 var data = { a: 1 }var vm = new Vue({ el: '#example', data: data})vm.$data === data // -> truevm.$el === document.getElementById('example') // -> true// $watch is an instance method vm.$watch('a', function (newVal, oldVal) { // This callback will be called after `VM.A` diubah})

Lihat dokumentasi API untuk melihat semua properti dan metode instance.

Siklus hidup instance

Contoh VUE memiliki serangkaian langkah inisialisasi ketika dibuat - misalnya, ia membutuhkan penetapan pengamatan data, menyusun templat, dan membuat binding data yang diperlukan. Dalam prosesnya, ia juga akan memanggil beberapa kait siklus hidup, memberikan peluang lari untuk logika khusus. Misalnya, kait yang dibuat dipanggil setelah instance dibuat:

 var vm = vue baru ({data: {a: 1}, dibuat: function () {// `ini menunjuk ke vm instance console.log ('a is:' + this.a)}}) // ->" a adalah: 1 ""

Ada juga beberapa kait lain yang dipanggil pada tahap yang berbeda dari siklus hidup instan, seperti disusun, siap, dihancurkan. Kait ini menunjuk ke instance Vue yang menyebutnya. Beberapa pengguna mungkin bertanya apakah Vue.js memiliki konsep "pengontrol"? Jawabannya adalah, tidak. Logika khusus komponen dapat dibagi menjadi kait ini.

Diagram siklus hidup

Gambar berikut menggambarkan siklus hidup instance. Anda tidak perlu segera mencari tahu semuanya, tetapi itu akan membantu di masa depan.

Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.

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.