Bermula dengan Fungsi Vue3 daripada Asas Sifar: Kuasai Kaedah Teras Vue3 dengan pantas

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue.js telah menjadi rangka kerja bahagian hadapan yang sangat popular. Dalam Vue 3, versi terkini Vue.js, fungsi dan kaedah baharu telah diperkenalkan dan fungsi dan kaedah sedia ada telah dinaik taraf. Dalam artikel ini, kami akan memperkenalkan beberapa fungsi teras dan kaedah Vue 3 untuk membantu pembaca dengan cepat bermula dengan rangka kerja Vue 3.

1. createApp

Dalam Vue 3, kami menggunakan fungsi createApp untuk mencipta tika Vue. Fungsi createApp mengambil satu parameter, iaitu objek yang mengandungi pilihan aplikasi. Kod sampel untuk menggunakan fungsi createApp untuk mencipta contoh Vue adalah seperti berikut:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
})

app.mount('#app')

Dalam kod di atas, kami menggunakan data objek data untuk mengisytiharkan pembolehubah mesej, dan kemudian menggunakan fungsi createApp untuk mencipta Contoh Vue. Akhir sekali, gunakan fungsi pelekap untuk melekapkan tika Vue pada elemen dengan apl id.

2. reaktif

Dalam Vue 3, kita boleh menggunakan fungsi reaktif untuk menukar objek JavaScript kepada objek reaktif. Objek reaktif membolehkan kami memantau perubahan dalam objek dengan mudah dan mengemas kini paparan secara automatik apabila sebarang sifat objek berubah. Kod sampel untuk menggunakan fungsi reaktif untuk mencipta objek reaktif adalah seperti berikut:

const obj = { count: 0 }
const reactiveObj = Vue.reactive(obj)

console.log(reactiveObj.count) // 输出0

reactiveObj.count++

console.log(reactiveObj.count) // 输出1

Dalam kod di atas, kami menggunakan fungsi reaktif untuk menukar obj objek JavaScript kepada objek reaktif reactiveObj. Kami kemudiannya boleh mengesahkan bahawa objek reaktif berfungsi dengan betul dengan mengeluarkan sifat kiraan reactiveObj.

3. dikira

Dalam Vue 3, kita boleh menggunakan fungsi yang dikira untuk mencipta sifat yang dikira. Sifat yang dikira ialah sifat yang bergantung pada nilai sifat lain, dan nilainya dikira berdasarkan nilai lain. Kod sampel untuk mencipta harta yang dikira menggunakan fungsi yang dikira adalah seperti berikut:

const reactiveObj = Vue.reactive({
  count: 0
})

const computedVal = Vue.computed(() => {
  return reactiveObj.count * 2
})

console.log(computedVal.value) // 输出0

reactiveObj.count++

console.log(computedVal.value) // 输出2

Dalam kod di atas, kami mentakrifkan sifat yang dikira computedVal yang nilainya adalah dua kali ganda reactiveObj.count. Apabila nilai reactiveObj.count berubah, nilai computedVal dikemas kini secara automatik.

4. tonton

Dalam Vue 3, kita boleh menggunakan fungsi jam tangan untuk memantau data dalam contoh Vue. Apabila data berubah, kami boleh melakukan operasi tertentu. Kod sampel untuk menggunakan fungsi jam tangan untuk memantau data dalam contoh Vue adalah seperti berikut:

const reactiveObj = Vue.reactive({
  count: 0
})

Vue.watch(() => {
  return reactiveObj.count
}, (newVal, oldVal) => {
  console.log(`count变化了：${oldVal} -> ${newVal}`)
})

reactiveObj.count++ // 输出"count变化了：0 -> 1"

Dalam kod di atas, kami mentakrifkan fungsi jam tangan untuk memantau perubahan dalam reactiveObj.count. Apabila nilai reactiveObj.count berubah, fungsi jam tangan akan melaksanakan fungsi panggil balik yang sepadan.

5. menyediakan dan menyuntik

Dalam Vue 3, kami boleh menggunakan fungsi menyediakan dan menyuntik untuk melaksanakan suntikan pergantungan antara komponen. Fungsi menyediakan dan menyuntik membolehkan komponen induk menghantar data kepada komponen anak tanpa menghantarnya melalui prop dan acara. Kod sampel untuk suntikan pergantungan menggunakan fungsi menyediakan dan menyuntik adalah seperti berikut:

const theme = Vue.reactive({
  color: 'red'
})

const ThemeProvider = {
  provide: {
    theme
  },
  template: `
    <div>
      <slot></slot>
    </div>
  `
}

const ThemeConsumer = {
  inject: ['theme'],
  template: `
    <div :style="{ color: theme.color }">
      <slot></slot>
    </div>
  `
}

const app = Vue.createApp({
  components: {
    ThemeProvider,
    ThemeConsumer
  }
})

app.mount('#app')

Dalam kod di atas, kami mentakrifkan komponen ThemeProvider dan komponen ThemeConsumer. Komponen ThemeProvider menggunakan fungsi menyediakan untuk menyediakan data tema kepada sub-komponen ThemeConsumer. Komponen ThemeConsumer menggunakan fungsi suntikan untuk mendapatkan data tema daripada komponen induk ThemeProvider. Akhir sekali, daftarkan komponen ThemeProvider dan ThemeConsumer ke contoh Vue.

Ringkasan

Di atas ialah lima fungsi teras dan kaedah Vue 3. Dengan mempelajari fungsi dan kaedah teras ini, kita boleh mempunyai pemahaman yang lebih mendalam tentang struktur rangka kerja dan ciri fungsi Vue 3. Pada masa yang sama, kami juga boleh menggunakan Vue 3 dengan lebih baik untuk membina aplikasi bahagian hadapan yang cekap, stabil dan fleksibel.

Atas ialah kandungan terperinci Bermula dengan Fungsi Vue3 daripada Asas Sifar: Kuasai Kaedah Teras Vue3 dengan pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!