Vue3 ialah versi terbaharu rangka kerja Vue Berbanding dengan Vue2, ia mempunyai peningkatan hebat dalam prestasi, API, sokongan TypeScript, dsb. Oleh itu, Vue3 telah menjadi topik hangat dalam pembangunan bahagian hadapan. Sebagai pembangun bahagian hadapan, jika anda ingin menguasai kemahiran pembangunan Vue3, maka anda perlu memahami dan menguasai fungsi di dalamnya. Artikel ini akan memperkenalkan fungsi biasa Vue3 supaya anda boleh memulakan pembangunan Vue3 dengan cepat.
createApp
createApp()
ialah fungsi baharu yang diperkenalkan dalam Vue3.0. Fungsi fungsi ini adalah untuk mencipta contoh aplikasi Vue dan mengembalikan contoh itu. createApp()
Fungsi ini boleh menerima komponen, templat dan objek konfigurasi untuk mentakrifkan aplikasi Vue. Fungsi
import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app');
mount
mount()
digunakan untuk melekapkan contoh aplikasi pada elemen DOM. Dalam Vue3, tika aplikasi boleh diikat pada elemen menggunakan kaedah mount()
. Apabila elemen DOM dipasang pada halaman, aplikasi boleh mula membuat persembahan.
app.mount('#app');
Seperti yang anda lihat, fungsi mount()
menerima pemilih CSS atau elemen DOM sebagai parameter, yang mentakrifkan elemen yang akan diikat oleh aplikasi. Fungsi
props
props
digunakan untuk menghantar data antara komponen. Dalam Vue3, sifat komponen menjadi lebih jelas dan lebih jelas. Pembangun boleh menggunakan pilihan props
untuk menentukan sifat komponen dan jenisnya. Berikut ialah contoh menggunakan pilihan props
:
export default { props: { name: String, age: Number } }
Seperti yang anda lihat, kami telah mentakrifkan atribut props
dan name
dalam nilai age
dalam pilihan komponen. Ini bermakna apabila kita menggunakan komponen ini, kita perlu menghantar nilai name
dan age
melalui atribut. Fungsi
<my-component name="John" age="25"></my-component>
setup
setup()
ialah API komponen baharu yang digunakan untuk mentakrifkan gelagat komponen. Dalam Vue3, fungsi setup()
adalah serupa dengan fungsi data()
dalam Vue2, tetapi ia memberikan lebih fleksibiliti untuk menggunakan sintaks baharu dan sistem reaktif Vue3 untuk mencapai prestasi yang lebih baik. Berikut ialah contoh mudah:
import { reactive } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); function increment() { state.count++; } return { state, increment } } }
Seperti yang anda lihat, kami menggunakan fungsi setup()
Vue3 dalam fungsi reactive()
, yang boleh menjadikan objek state
sebagai objek responsif. Dengan cara ini, kami boleh mengubah suai atribut dalam state
dan Vue akan mengemas kini paparan berkaitan secara automatik. Selain kereaktifan, kita juga boleh mentakrifkan fungsi dan pembolehubah lain dalam fungsi setup()
dan mengembalikannya kepada komponen induk. Fungsi
watch
watch()
digunakan untuk memantau perubahan dalam data komponen. Ia boleh memantau beberapa data tertentu dan melaksanakan fungsi yang sepadan apabila data berubah. watch()
Fungsi boleh menerima dua parameter Parameter pertama ialah data yang ingin kita pantau, dan parameter kedua ialah fungsi yang akan dilaksanakan apabila data berubah. Berikut ialah contoh penggunaan fungsi watch()
:
import { watch } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); watch(() => state.count, (newVal, oldVal) => { console.log(`New Value: ${newVal}, Old Value: ${oldVal}`); }); return { state } } }
Di sini kami menggunakan fungsi watch
Vue3 untuk memantau perubahan dalam state.count
. Apabila state.count
berubah, fungsi panggil balik yang dihantar ke fungsi watch()
akan dilaksanakan dan maklumat log nilai lama dan baharu akan dikeluarkan. Fungsi
computed
computed
ialah API baharu untuk sifat yang dikira. Dalam Vue3, kita boleh menggunakan fungsi computed
untuk menentukan sifat yang dikira. Sifat yang dikira ialah sifat reaktif berasaskan kebergantungan yang dikira semula secara automatik apabila data yang bergantung padanya berubah. Berikut ialah contoh penggunaan fungsi computed
:
import { computed } from 'vue'; export default { setup() { const state = reactive({ height: 180, weight: 75 }); const bmi = computed(() => state.weight / (state.height / 100) ** 2); return { state, bmi } } }
Di sini kami menggunakan fungsi computed
Vue3 untuk mentakrifkan sifat yang dikira bmi
dan mengembalikannya kepada komponen induk dalam hasil yang dikembalikan. Dengan cara ini, kita boleh mengalihkan logik pengiraan harta yang dikira di luar komponen. Apabila nilai state.height
dan state.weight
berubah, kami tidak perlu mengira semula nilai bmi
secara manual, Vue akan menyelesaikan tugasan ini secara automatik untuk kami. Fungsi
ref
ref()
ialah API baharu dalam Vue3, digunakan untuk membuat rujukan reaktif. Dalam Vue3, sebarang nilai boleh dibungkus menjadi nilai reaktif menggunakan fungsi ref()
. Berikut ialah contoh penggunaan fungsi ref()
:
import { ref } from 'vue'; export default { setup() { const count = ref(0); return { count } } }
Di sini kami membungkus pembolehubah count
ke dalam rujukan reaktif, yang bermaksud apabila kami mengubah suai nilai count
, Vue akan mengemas kini Berkaitan secara automatik pandangan. Fungsi
toRefs
toRefs()
ialah satu lagi API baharu dalam Vue3, digunakan untuk mencipta objek rujukan reaktif. Dalam Vue3, apabila kami menggunakan fungsi ref()
untuk mencipta rujukan reaktif, kami tidak boleh mendapatkan nilainya secara langsung melalui penstrukturan. Pada masa ini, kita boleh menggunakan fungsi toRefs()
Vue3 untuk menukar objek rujukan responsif kepada objek supaya kita boleh mendapatkan nilainya secara langsung melalui penstrukturan. Berikut ialah contoh menggunakan fungsi toRefs()
:
import { reactive, toRefs } from 'vue'; export default { setup() { const state = reactive({ name: 'John', age: 25 }); return { ...toRefs(state) } } }
可以看到,我们使用Vue3的toRefs()
函数将响应式对象state
转换成了一个响应式引用对象,然后我们使用对象的解构语法来提取state
的属性。
总结:
以上就是Vue3.0常用的函数,这些函数对于Vue3开发非常重要。学会这些函数,可以让你更好地了解Vue3的开发方式,更快地掌握Vue3的开发技能。希望本文对你学习Vue3有所帮助。
Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi Vue3: Membolehkan anda memulakan pembangunan Vue3 dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!