Rumah > Artikel > hujung hadapan web > 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.
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>
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.
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>
Memperkenalkan komponen HelloWorld ke dalam halaman dan menggunakannya sebagai komponen kanak-kanak. .
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.
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
Dalam contoh di atas, kami menggunakan fungsi jam tangan untuk memantau perubahan dalam pembolehubah kiraan dan mengeluarkan log yang sepadan apabila kiraan berubah. Fungsi
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
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.
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!