Berapa kali vue dipanggil

Vue.js ialah rangka kerja JavaScript popular yang menjadikan pembangunan bahagian hadapan lebih cekap dan lebih pantas melalui pengikatan data dan komponenisasi. Semasa proses pembangunan, kita selalunya perlu memahami prestasi dan kecekapan pelaksanaan Vue.js. Salah satu petunjuk penting ialah bilangan panggilan. Jadi, berapa kali Vue.js akan dipanggil? Mari kita lihat.

Pertama, kita perlu memahami panggilan dalam Vue.js. Vue.js menganggap setiap komponen sebagai unit bebas, dan merangkum keadaan dan logik pemprosesan dalam komponen di dalam komponen. Apabila keadaan komponen berubah, Vue.js perlu mengira semula hasil pemaparan komponen dan mengemas kini DOM. Apabila kami membuat contoh komponen, Vue.js akan mencipta DOM maya (DOM Maya) untuk komponen, kemudian mengira kandungan DOM maya ini dan mengemas kini DOM sebenar.

Dalam proses ini, Vue.js akan memanggil pelbagai fungsi cangkuk kitaran hayat mengikut keperluan. Fungsi cangkuk kitaran hayat ini dilaksanakan semasa kitaran hayat komponen yang berbeza. Contohnya, apabila komponen dicipta, Vue.js akan memanggil fungsi cangkuk yang dicipta apabila komponen dimusnahkan, Vue.js akan memanggil fungsi cangkuk yang dimusnahkan. Fungsi cangkuk ini diperlukan untuk Vue.js melengkapkan permulaan dan pemusnahan komponen, dan juga boleh digunakan untuk melaksanakan operasi lain, seperti menghantar permintaan, memproses data, dsb.

Jadi, berapa kalikah fungsi cangkuk kitaran hayat ini akan dipanggil dalam Vue.js? Jawapan kepada soalan ini tidak begitu pasti kerana ia melibatkan banyak faktor, seperti kerumitan komponen, saiz data, kekerapan kemas kini data, dan asas kod yang digunakan. Walau bagaimanapun, kita boleh menganggarkannya secara kasar melalui beberapa eksperimen.

Kami boleh mencipta komponen Vue.js yang ringkas dan menambah beberapa fungsi cangkuk kitaran hayat padanya untuk mengeluarkan beberapa maklumat, seperti nama komponen, cap masa, dsb. Kemudian, kita boleh melihat bagaimana komponen dipanggil dalam keadaan yang berbeza dengan mengubah suai keadaan komponen.

Berikut ialah contoh komponen Vue.js mudah:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  created() {
    console.log(`[${this.name}] Created at: ${new Date().getTime()}`)
  },
  updated() {
    console.log(`[${this.name}] Updated at: ${new Date().getTime()}`)
  },
  mounted() {
    console.log(`[${this.name}] Mounted at: ${new Date().getTime()}`)
  },
  destroyed() {
    console.log(`[${this.name}] Destroyed at: ${new Date().getTime()}`)
  }
}
</script>

Dalam komponen ini, kami telah menambah empat fungsi cangkuk kitaran hayat, iaitu dicipta, dikemas kini, dipasang dan dimusnahkan. Setiap kali komponen dicipta, dikemas kini, dipasang atau dimusnahkan, fungsi cangkuk ini akan dipanggil dan maklumat yang sepadan akan dikeluarkan. Sebagai contoh, keluarkan nama komponen dan masa penciptaan apabila komponen dicipta:

[HelloWorld] Created at: 1616591410073

Kita boleh memerhatikan panggilan fungsi cangkuk ini dengan mengubah suai keadaan komponen. Berikut ialah kod ujian mudah:

<template>
  <div>
    <button @click="updateMessage">Update message</button>
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'Initial message'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'New message'
    }
  }
}
</script>

Dalam kod ini, kami memperkenalkan komponen HelloWorld yang disebut di atas dan menambah butang untuk mengemas kini keadaan komponen dengan mengklik butang. Setiap kali keadaan dikemas kini, Vue.js mengira semula hasil pemaparan komponen dan mengemas kini DOM sebenar. Pada masa yang sama, Vue.js juga akan memanggil beberapa fungsi cangkuk untuk mengendalikan proses ini.

Berikut ialah contoh keputusan ujian:

[HelloWorld] Created at: 1616591410073
[HelloWorld] Mounted at: 1616591410074
[HelloWorld] Updated at: 1616591608416

Dalam contoh ini, kita dapat melihat bahawa fungsi cangkuk yang dicipta dan fungsi cangkuk yang dipasang dipanggil sekali apabila komponen dicipta. Apabila kami mengklik butang untuk mencetuskan kemas kini keadaan komponen, Vue.js akan mengira semula hasil pemaparan komponen dan mengemas kini DOM sebenar. Pada masa yang sama, Vue.js juga akan memanggil fungsi cangkuk yang dikemas kini untuk mengendalikan proses kemas kini ini.

Ringkasnya, Vue.js akan memanggil nombor yang berbeza fungsi cangkuk kitaran hayat dalam keadaan komponen yang berbeza. Dalam pembangunan sebenar, kita perlu menilai prestasi dan kecekapan pelaksanaan komponen berdasarkan kerumitan dan volum datanya untuk mengoptimumkan prestasi komponen. Pada masa yang sama, kami juga boleh menggunakan kaedah ujian yang serupa dengan yang di atas untuk memerhati situasi panggilan Vue.js untuk lebih memahami prinsip kerja Vue.js.

Atas ialah kandungan terperinci Berapa kali vue dipanggil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!