Tutorial asas VUE3: melaksanakan fungsi biasa

Vue3 ialah versi terkini Vue.js yang dikeluarkan baru-baru ini. Vue3 menyediakan banyak ciri dan pengoptimuman baharu, seperti sistem responsif baharu, sokongan jenis yang lebih baik dan peningkatan prestasi, menjadikannya lebih cekap dan lebih mudah untuk digunakan.

Artikel ini akan memperkenalkan tutorial asas untuk melaksanakan fungsi biasa dalam Vue3. Berikut ialah pelaksanaan tiga fungsi asas:

1 Data responsif

Vue3 mereka bentuk semula sistem responsif dan menggunakan objek Proksi untuk melaksanakan data responsif. Berbanding dengan defineProperty Vue2, Proksi boleh memintas secara rekursif akses harta objek, dan boleh menyokong tatasusunan yang lebih baik, penambahan/penyingkiran sifat dinamik dan sifat bukan penghitungan.

Dalam Vue3, anda boleh mencipta tika Vue melalui fungsi createApp dan menggunakan kaedah reaktif untuk menukar data kepada data responsif.

Contoh kod:

import { createApp, reactive } from 'vue'

const state = reactive({
  message: 'Hello Vue3!'
})

const app = createApp({
  template: `<div>{{ state.message }}</div>`,
  data() {
    return {
      state
    }
  }
})

app.mount('#app')

2. Pembangunan komponen

Pembangunan komponen dalam Vue3 juga telah dipertingkatkan dan menyediakan lebih banyak fungsi. Komponen boleh merujuk sifat dan kaedah secara eksplisit dalam komponen Induk dan menggunakan fungsi persediaan untuk menentukan data dan kaedah komponen.

Contoh kod:

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Increment</button>
    <p>Current count is: {{ count }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  props: {
    title: String
  },
  setup(props) {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    const displayCount = computed(() => {
      return `The count is currently ${count.value}`
    })
    
    return {
      count,
      increment,
      displayCount
    }
  }
}
</script>

3 Pengurusan Laluan

Penghala Vue ialah salah satu perpustakaan pihak ketiga yang paling biasa digunakan dalam Vue, digunakan untuk mengurus penghalaan dalam satu halaman aplikasi . Dalam Vue3, Penghala Vue juga telah dipertingkatkan dan menyokong pengawal penghalaan penulisan berdasarkan API Komposisi.

Sampel kod:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // check if user is authenticated
    if (!auth.isAuthenticated()) {
      next({
        name: 'login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

Ringkasnya, Vue3 menyediakan banyak ciri dan penambahbaikan baharu, menjadikan pembangunan lebih cekap dan mudah digunakan. Artikel ini memperkenalkan pelaksanaan tiga fungsi asas, yang boleh digunakan dalam kombinasi dalam projek sebenar untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Atas ialah kandungan terperinci Tutorial asas VUE3: melaksanakan fungsi biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!