Apakah fungsi cangkuk kitaran hayat vue

Dalam Vue, fungsi cangkuk kitaran hayat merujuk kepada beberapa fungsi yang berjalan dalam kitaran hayat apabila ia melalui proses mencipta dan mengemas kini komponen DOM boleh dibuat dan diisytiharkan dalam fungsi ini;

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah fungsi cangkuk kitaran hayat vue

Setiap tika Vue melalui satu siri langkah permulaan. Daripada menetapkan data pada penciptaan kepada menyusun templat, memuatkan contoh ke dalam DOM, dan akhirnya mengemas kini DOM semasa perubahan data. Proses ini dipanggil kitaran hayat contoh Vue Secara lalai, semasa mereka melalui proses mencipta dan mengemas kini DOM, beberapa fungsi dijalankan di dalamnya, komponen Vue dibuat dan diisytiharkan kitaran hidup.

Vue mempunyai lapan kaedah kitaran hayat:

• Sebelum mencipta

• Dicipta

• Sebelum dipasang

• Dipasang

• Sebelum dikemas kini

• Dikemas kini

• Sebelum dimusnahkan

• Dimusnahkan

Dalam artikel ini, anda akan mengetahui tentang semua mata kail ini dan mempelajari setiap satu daripadanya pada setiap peringkat.

Artikel ini akan menggunakan komponen ujian, yang terletak dalam folder komponen dalam folder src. Ia sepatutnya kelihatan seperti ini:

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

Dalam tutorial ini, bahagian skrip akan digunakan secara individu untuk pelbagai bekas cangkuk.

beforeCreate()

Ini ialah cangkuk kitaran hayat pertama yang dipanggil dalam Vue.js, ia dipanggil serta-merta selepas tika Vue dimulakan.

<script>
export default {
  name: &#39;Test&#39;,
  beforeCreate() {
    alert(&#39;beforCreate hook has been called&#39;);
    console.log(&#39;beforCreate hook has been called&#39;);
  }
}
</script>

Anda boleh menjalankan program dalam persekitaran pembangunan untuk menyemak antara muka.

npm run serve

Perhatikan bahawa sebelum memuatkan komponen, pernyataan amaran yang ditulis dalam cangkuk kitaran hayat dilaksanakan terlebih dahulu. Inilah yang berlaku apabila fungsi dipanggil sebelum enjin Vue mencipta komponen aplikasi. Pada masa ini, ia berada di peringkat beforeCreate, dan sifat yang dikira, pemerhati, peristiwa, sifat data, operasi, dsb. masih belum ditetapkan.

dicipta()

Seperti yang anda mungkin rasa, ini ialah cangkuk kitar hayat kedua yang dipanggil sejurus selepas cangkuk beforeCreated. Pada peringkat ini, tika Vue telah dimulakan dan telah mengaktifkan sifat dikira, pemerhati, peristiwa, sifat data dan operasi seterusnya.

<script>
export default {
  name: &#39;Test&#39;,
  data() {
    return {
      books: 0
    }
    },
  created() {
    alert(&#39;Created hook has been called&#39;);
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>

Jika anda menjalankan program, anda akan mendapati bahawa jenis data kini dipaparkan. Ini tidak mungkin dalam fasa beforeCreated kerana pengaktifan yang berlaku pada masa itu masih belum berlaku. Tetapi tika Vue tidak dipasang pada peringkat ini, jadi anda tidak boleh memanipulasi DOM di sini, sifat elemen belum tersedia lagi.

beforeMount()

Ini adalah saat sebelum kejadian dipasang pada DOM, kedua-dua templat dan gaya berskop dihimpun di sini, tetapi anda masih tidak boleh memanipulasi DOM , sifat elemen masih tidak tersedia.

<script>
export default {
  beforeMount() {
    alert(&#39;beforeMount is called&#39;)
  }
}
</script>

mounted()

Ini ialah cangkuk kitar hayat seterusnya yang dipanggil selepas beforeMounted . Ia dipanggil serta-merta selepas contoh dipasang. Kini komponen aplikasi atau komponen lain dalam projek boleh digunakan. Ia kini boleh melakukan operasi seperti memasang data pada templat, menggantikan elemen DOM dengan elemen yang diisi data dan atribut elemen kini tersedia.

<script>
export default {
  mounted() {
    alert(&#39;mounted has been called&#39;); 
   }
}
</script>

Ini ialah lokasi lalai untuk projek yang dibuat dengan Vue CLI kerana, seperti yang kita lihat pada mulanya, pemasangan sudah dilakukan dalam fail main.js. Inilah sebabnya anda mungkin tidak boleh menggunakan cangkuk lain, kerana contoh itu telah dipasang untuk anda secara lalai.

beforeUpdate()

Tukar data yang perlu dikemas kini dalam DOM di sini. Peringkat ini sesuai untuk sebarang logik sebelum membuat perubahan seperti mengalih keluar pendengar acara.

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
 },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

Pada mulanya terdapat anotasi alu-aluan pada DOM, tetapi semasa fasa pelekap (di mana DOM boleh dimanipulasi) data berubah, jadi makluman beforeUpdate muncul sebelum perubahan.

updated()

Cangkuk kitaran hayat ini dipanggil serta-merta selepas kemas kini kepada DOM Ia dilaksanakan selepas cangkuk beforeUpdate dipanggil. Anda boleh melakukan operasi berkaitan DOM di sini, tetapi tidak disyorkan untuk menukar keadaan di dalam cangkuk ini kerana Vue sudah menyediakan platform khusus untuk ini.

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
  },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
updated(){
 alert(&#39;Updated hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

beforeDestroy()

Masa untuk memanggil cangkuk kitaran hayat Vue ini adalah sebelum tika Vue dimusnahkan, contoh dan semua fungsi masih utuh dan berada di sini Bekerja di mana-mana sahaja. Pada peringkat ini anda boleh melaksanakan pengurusan sumber, memadam pembolehubah dan membersihkan komponen.

<script>
export default {
name: &#39;Test&#39;,
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

dimusnahkan()

Ini ialah peringkat akhir kitaran hayat Vue, di mana semua contoh Vue kanak-kanak telah dimusnahkan, pendengar acara dan semua arahan Perkara seperti itu telah tidak terikat pada peringkat ini. Panggil ini selepas menjalankan memusnahkan objek.

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

Apabila anda menjalankan program dan melihat konsol, anda tidak akan melihat apa-apa.

【Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah fungsi cangkuk kitaran hayat vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!