Bagaimanakah Vue melaksanakan fungsi cangkuk dan pengurusan kitaran hayat?

Vue ialah rangka kerja JavaScript popular yang menyediakan beberapa mekanisme khas supaya komponen boleh diurus, diubah suai dan dimanipulasi dengan mudah. Salah satu mekanisme penting ialah fungsi cangkuk dan pengurusan kitaran hayat. Artikel ini akan memperkenalkan konsep fungsi cangkuk dan kitaran hayat dalam Vue dan membincangkan cara melaksanakannya.

1. Apakah fungsi cangkuk dan kitaran hayat?

Dalam Vue, setiap komponen mempunyai kitaran hayat. Kitaran hayat ialah proses yang dilalui oleh sesuatu komponen dalam pelbagai peringkat. Vue membahagikan kitaran hayat komponen kepada peringkat yang berbeza dan melaksanakan operasi tertentu pada setiap peringkat. Operasi ini dipanggil fungsi cangkuk dalam Vue.

Fungsi cangkuk ialah kaedah khusus yang dilaksanakan pada pelbagai peringkat kitaran hayat komponen. Dalam Vue, fungsi cangkuk boleh membantu kami melaksanakan beberapa operasi dalam peringkat kitaran hayat komponen yang berbeza. Ini menjadikannya lebih mudah untuk mengurus tingkah laku komponen.

2. Peringkat kitaran hayat Vue yang berbeza

Kitaran hayat Vue boleh dibahagikan kepada 8 peringkat berbeza:

• beforeCreate
• created
• beforeMount
beforeMount
• beforeMount
• dikemas kini
• sebelum Musnah
• dimusnahkan
Dalam kitaran hayat komponen Vue, setiap peringkat mempunyai fungsi cangkuk yang sepadan yang boleh melakukan operasi tertentu pada masa tertentu. Berikut ialah pengenalan terperinci kepada setiap peringkat dan fungsi kitaran hayatnya yang sepadan:

beforeCreate: dipanggil sebelum permulaan instance. Pada ketika ini sifat kejadian itu belum dimulakan, jadi data dan sifat yang dikira tidak boleh diakses pada peringkat ini.

• dibuat: Contoh telah dibuat dan data telah dimulakan, tetapi DOM belum dipasang lagi. Pada ketika ini data dan sifat yang dikira boleh diakses, tetapi nod DOM tidak boleh diperolehi.
• beforeMount: DOM telah dipasang tetapi masih belum diberikan. Pada ketika ini, nod DOM dan contoh komponen boleh diperolehi.
• dilekapkan: DOM telah dipasang dan diberikan. Pada masa ini, anda boleh mengakses nod DOM dan melakukan operasi yang serupa dengan jQuery Sebaik-baiknya menggunakan cangkuk tersuai untuk mendengar pelbagai acara nod DOM pada peringkat ini.
• beforeUpdate: Data telah berubah, tetapi DOM belum dipaparkan semula. Pada masa ini, anda boleh mengubah suai data, tetapi jangan mencetuskan kemas kini status.
• dikemas kini: Data telah dikemas kini dan DOM telah dipaparkan semula. Data boleh diubah suai, tetapi kemas kini status tidak boleh dicetuskan.
• beforeDestroy: Instance akan dimusnahkan. Kerja pembersihan boleh dilakukan di sini, seperti mengosongkan pemasa, dsb.
• dimusnahkan: Instance telah dimusnahkan. Pada masa ini, kerja pembersihan perlu dilakukan, seperti membersihkan pendengar acara, dsb.

Bagaimana untuk menggunakan fungsi cangkuk dan kitaran hayat?

3. Dalam Vue, anda boleh menggunakan API yang disediakan secara rasmi untuk menentukan fungsi cangkuk komponen. Dalam pilihan tikar atau komponen Vue, anda boleh menentukan fungsi cangkuk pada peringkat yang berbeza:

var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  beforeCreate: function () {
    console.log('beforeCreate !')
  },
  created: function () {
    console.log('created !')
  },
  beforeMount: function () {
    console.log('beforeMount !')
  },
  mounted: function () {
    console.log('mounted !')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate !')
  },
  updated: function () {
    console.log('updated !')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy !')
  },
  destroyed: function () {
    console.log('destroyed !')
  }
})

Fungsi cangkuk akan dipanggil secara automatik pada peringkat kitaran hayat tika yang berbeza. Dengan cara ini, contoh boleh dikendalikan pada masa tertentu dan komponen boleh diuruskan dengan lebih mudah. Contohnya, anda boleh meminta data dalam fungsi cangkuk yang dicipta, mengubah suai nod DOM dalam fungsi cangkuk yang dipasang, membersihkan kerja dalam fungsi cangkuk beforeDestroy, dsb.

Selain itu, anda juga boleh menentukan fungsi cangkuk dalam komponen. Fungsi cangkuk komponen sangat serupa dengan fungsi cangkuk contoh dan boleh dipanggil secara automatik dan melakukan operasi tertentu:

Vue.component('my-component', {
  template: '<div>My Component</div>',
  beforeCreate: function () {
    console.log('beforeCreate !')
  },
  created: function () {
    console.log('created !')
  },
  beforeMount: function () {
    console.log('beforeMount !')
  },
  mounted: function () {
    console.log('mounted !')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate !')
  },
  updated: function () {
    console.log('updated !')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy !')
  },
  destroyed: function () {
    console.log('destroyed !')
  }
})

Jika anda perlu merangkum komponen, anda juga boleh menggunakan sambungan mixin dalam komponen, dan mixin akan dipanggil secara automatik semasa kitaran hayat fungsi Cangkuk komponen:

var mixin = {
  beforeCreate: function () {
    console.log('beforeCreate !')
  },
  created: function () {
    console.log('created !')
  },
  beforeMount: function () {
    console.log('beforeMount !')
  },
  mounted: function () {
    console.log('mounted !')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate !')
  },
  updated: function () {
    console.log('updated !')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy !')
  },
  destroyed: function () {
    console.log('destroyed !')
  }
};

Vue.component('my-component', {
  mixins: [mixin],
  template: '<div>My Component</div>'
})

Ringkasan

4. Fungsi cangkuk dan kitaran hayat dalam Vue menyediakan mekanisme yang mudah untuk pengurusan dan pengendalian komponen. Semasa kitaran hayat komponen, anda boleh menentukan fungsi cangkuk untuk melaksanakan operasi tertentu. Fungsi cangkuk boleh ditakrifkan dalam pilihan contoh atau komponen Vue, atau dalam komponen menggunakan sambungan campuran. Dengan cara ini, kita boleh mengawal tingkah laku komponen dengan lebih tepat dan menjadikannya lebih mudah untuk mengurus dan mengubah suai komponen.

Atas ialah kandungan terperinci Bagaimanakah Vue melaksanakan fungsi cangkuk dan pengurusan kitaran hayat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!