Penjelasan terperinci tentang fungsi Vue3: Membolehkan anda memulakan pembangunan Vue3 dengan cepat

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.

1. 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');

2. 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

3. 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>

4. 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

5. 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

6. 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

7. 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

8. 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!