Petua pembangunan Vue3+TS+Vite: Cara menggunakan API Komposisi Vue3 dengan elegan

Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan API Komposisi Vue3 dengan elegan

Pengenalan:
Pelancaran Vue3 telah membawa beberapa siri perubahan kepada pembangunan bahagian hadapan, salah satu perubahan terbesar ialah pengenalan Komposisi API ( Composable API). Berbanding dengan API Pilihan tradisional, API Komposisi membolehkan kami mengatur dan mengurus kod kami dengan lebih fleksibel dan cekap. Artikel ini akan memperkenalkan cara menggunakan API Komposisi Vue3 dengan elegan dan menggabungkan TypeScript dan Vite untuk pembangunan projek.

1. Pasang dan mulakan projek
Pertama, kita perlu memasang versi terkini Vue CLI, pasangkannya melalui arahan berikut:

npm install -g @vue/cli

Seterusnya, kita boleh menggunakan Vue CLI untuk mencipta projek baharu:

vue create my-project

Apabila mencipta projek, kita boleh memilih TypeScript sebagai templat projek. Jika tiada pilihan, kami juga boleh menambah sokongan TypeScript secara manual:

vue add @vue/typescript

Seterusnya, kita boleh menggunakan Vite sebagai alat bina projek dan memasangnya melalui arahan berikut:

npm init vite@latest my-vite-project -- --template vue-ts

Dengan cara ini, kami telah berjaya memasang dan memulakan a Projek Vue3+TS +Vite.

2. Gunakan API Komposisi
Menggunakan API Komposisi boleh mengatur kod kami dengan lebih baik dan meningkatkan kecekapan pembangunan kami. Berikut ialah contoh mudah untuk menunjukkan cara menggunakan API Komposisi.

1. Buat komponen baharu
   Pertama, kita boleh mencipta komponen baharu, seperti HelloWorld.vue:

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
    const message = ref('Hello, World!');
   
    onMounted(() => {
      setTimeout(() => {
        message.value = 'Hello, Vue3!';
      }, 2000);
    });
   
    return {
      message,
    };
     },
   };
   </script>

   Salin selepas log masuk

Dalam contoh ini, kami menggunakan fungsi ref dalam API Komposisi untuk menentukan mesej data reaktif, dan nilai mesej diubah suai dalam fungsi cangkuk yang dipasang bagi komponen.

2. Menggunakan Komponen
   Seterusnya, gunakan komponen ini dalam halaman kami:

   <template>
     <div>
    <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from './HelloWorld.vue';
   
   export default {
     components: {
    HelloWorld,
     },
   };
   </script>

   Salin selepas log masuk

Memperkenalkan komponen HelloWorld ke dalam halaman dan menggunakannya sebagai komponen kanak-kanak. .

3. Fungsi Composition API yang biasa digunakan
3. Selain fungsi ref dan onMounted yang diperkenalkan di atas, terdapat juga beberapa fungsi Composition API yang boleh membantu kita berkembang dengan lebih baik.

   
   

fungsi reaktif

npm run dev

Dalam contoh di atas, kami menggunakan fungsi reaktif untuk menukar keadaan objek biasa kepada objek reaktif, dan mengakses serta mengubah suainya melalui state.count.

1. Fungsi jam tangan
   Fungsi jam tangan boleh memantau perubahan dalam data responsif dan melaksanakan fungsi panggil balik yang sepadan apabila data berubah. Contohnya adalah seperti berikut:

   import { reactive } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   console.log(state.count); // 输出：0
   
   state.count++;
   console.log(state.count); // 输出：1

   Salin selepas log masuk

Dalam contoh di atas, kami menggunakan fungsi jam tangan untuk memantau perubahan dalam pembolehubah kiraan dan mengeluarkan log yang sepadan apabila kiraan berubah. Fungsi

2. toRefs
   toRefs boleh menukar sifat objek responsif kepada objek ref biasa dan mengembalikan objek baharu. Contohnya adalah seperti berikut:

   import { ref, watch } from 'vue';
   
   const count = ref(0);
   
   watch(count, (newValue, oldValue) => {
     console.log(`count从${oldValue}变为${newValue}`);
   });
   
   count.value++; // 输出：count从0变为1

   Salin selepas log masuk

   Dalam contoh di atas, kami menggunakan fungsi toRefs untuk menukar atribut count dalam keadaan menjadi objek ref biasa, supaya kami boleh mengakses dan mengubah suainya melalui count.value.

   4 Ringkasan
   3. Pengenalan API Komposisi Vue3 menjadikan kod kami lebih fleksibel dan cekap, serta boleh mengatur dan mengurus kod kami dengan lebih baik. Artikel ini memperkenalkan cara menggunakan API Komposisi Vue3 dan membangunkan projek Vue3 dengan TypeScript dan Vite. Dengan memahami dan menguasai penggunaan API Komposisi, kami boleh membangunkan projek Vue3 dengan lebih elegan dan meningkatkan kecekapan pembangunan kami.

      
      Saya harap artikel ini dapat memberikan sedikit bantuan dan panduan untuk anda menggunakan API Komposisi dalam pembangunan projek Vue3.

   Atas ialah kandungan terperinci Petua pembangunan Vue3+TS+Vite: Cara menggunakan API Komposisi Vue3 dengan elegan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!