Cara menggunakan onLoad dalam vue3 (contoh kod)

Dengan pelancaran Vue 3, pembangun juga perlu menyepadukan semula kemahiran dan pengetahuan mereka. Dalam Vue 2, onLoad ialah salah satu fungsi cangkuk, yang digunakan untuk melaksanakan beberapa kod logik apabila komponen dimulakan. Walau bagaimanapun, dalam Vue 3, fungsi cangkuk onLoad telah dimansuhkan. Jadi, bagaimana untuk menggunakan onLoad dalam Vue 3?

Pertama sekali, kita perlu memahami API Komposisi baharu dalam Vue 3. API Komposisi bukan sahaja menyediakan kaedah fungsi yang lebih fleksibel, tetapi juga struktur logik yang lebih jelas.

Vue 3 menyediakan dua cangkuk: beforeMount dan dipasang. beforeMount dilaksanakan sebelum komponen diberikan, manakala mount dilaksanakan selepas komponen diberikan. Oleh itu, kita boleh membahagikan kod logik dalam Vue 2 kepada dua bahagian, meletakkan kod yang asalnya dilaksanakan dalam onLoad dalam cangkuk beforeMount, dan meletakkan kod yang asalnya dilaksanakan dalam dipasang pada cangkuk yang dipasang.

Kod sampel adalah seperti berikut:

import { onMounted, onBeforeMount } from 'vue';
export default {
  setup() {
    onBeforeMount(() => {
      // 在组件渲染之前执行
      console.log('组件准备渲染');
    });
    onMounted(() => {
      // 在组件渲染完成后执行
      console.log('组件已经渲染完毕');
    });
  },
};

Perlu diambil perhatian bahawa persediaan objek yang ditambah melalui API Komposisi dilaksanakan sebelum komponen diwujudkan, jadi kita perlu mengaitkan sebelumLekapkan dan cangkuk yang dipasang Letakkannya ke dalam persediaan.

Ringkasnya, walaupun onLoad telah dimansuhkan dalam Vue 3, sebelumMount dan cangkuk dipasang yang disediakan melalui API Komposisi boleh menjadi pengganti yang baik dan lebih jelas serta lebih mudah untuk digunakan. Di atas adalah pengenalan kepada penggunaan onLoad dalam Vue 3. Saya harap ia dapat membantu anda.

Atas ialah kandungan terperinci Cara menggunakan onLoad dalam vue3 (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!