Tutoriel de base de VUE3 : implémentation des fonctions communes

Vue3 est la dernière version de Vue.js publiée récemment. Vue3 fournit de nombreuses nouvelles fonctionnalités et optimisations, telles qu'un nouveau système réactif, une meilleure prise en charge des types et des améliorations de performances, le rendant plus efficace et plus facile à utiliser.

Cet article présentera les tutoriels de base pour implémenter les fonctions courantes dans Vue3. Voici la mise en œuvre de trois fonctions de base :

1. Données réactives

Vue3 repense le système réactif et utilise des objets proxy pour implémenter des données réactives. Comparé à DefineProperty de Vue2, Proxy peut intercepter de manière récursive l'accès aux propriétés des objets et peut mieux prendre en charge les tableaux, l'ajout/suppression dynamique de propriétés et les propriétés non énumérées.

Dans Vue3, vous pouvez créer une instance Vue via la fonction createApp et utiliser la méthode réactive pour convertir les données en données réactives.

Exemple de code :

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. Développement de composants

Le développement de composants dans Vue3 a également été amélioré et fournit plus de fonctions. Les composants peuvent référencer explicitement les propriétés et les méthodes du composant Parent et utiliser la fonction de configuration pour définir les données et les méthodes du composant.

Exemple de code :

<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. Gestion du routage

Vue Router est l'une des bibliothèques tierces les plus couramment utilisées dans Vue, utilisée pour gérer le routage dans les applications monopage. Dans Vue3, Vue Router a également été amélioré et prend en charge l'écriture de gardes de routage basées sur l'API Composition.

Exemple de code :

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

Pour résumer, Vue3 fournit de nombreuses nouvelles fonctionnalités et améliorations pour rendre le développement plus efficace et plus facile à utiliser. Cet article présente la mise en œuvre de trois fonctions de base, qui peuvent être utilisées en combinaison dans des projets réels pour améliorer l'efficacité du développement et l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!