Premiers pas avec les fonctions Vue3 à partir de Zero Basics : maîtrisez rapidement les méthodes de base de Vue3

Avec le développement continu de la technologie front-end, Vue.js est devenu un framework front-end très populaire. Dans Vue 3, la dernière version de Vue.js, de nouvelles fonctions et méthodes ont été introduites et les fonctions et méthodes existantes ont été mises à niveau. Dans cet article, nous présenterons quelques fonctions et méthodes principales de Vue 3 pour aider les lecteurs à démarrer rapidement avec le framework Vue 3.

1. createApp

Dans Vue 3, nous utilisons la fonction createApp pour créer une instance Vue. La fonction createApp prend un paramètre, qui est un objet contenant des options d'application. L'exemple de code pour utiliser la fonction createApp pour créer une instance Vue est le suivant :

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

app.mount('#app')

Dans le code ci-dessus, nous utilisons les données de l'objet de données pour déclarer une variable de message, puis utilisons la fonction createApp pour créez une instance Vue. Enfin, utilisez la fonction mount pour monter l'instance Vue sur l'élément avec l'application id.

2. reactive

Dans Vue 3, nous pouvons utiliser la fonction réactive pour convertir des objets JavaScript en objets réactifs. Les objets réactifs nous permettent de surveiller facilement les modifications apportées aux objets et de mettre automatiquement à jour la vue lorsque les propriétés de l'objet changent. L'exemple de code pour utiliser la fonction réactive pour créer un objet réactif est le suivant :

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

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

reactiveObj.count++

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

Dans le code ci-dessus, nous utilisons la fonction réactive pour convertir l'objet JavaScript obj en un objet réactif reactiveObj. Nous pouvons ensuite vérifier que l'objet réactif fonctionne correctement en affichant la propriété count de reactiveObj.

3. computed

Dans Vue 3, nous pouvons utiliser la fonction calculée pour créer des propriétés calculées. Une propriété calculée est une propriété qui dépend de la valeur d'autres propriétés et sa valeur est calculée en fonction d'autres valeurs. L'exemple de code pour créer une propriété calculée à l'aide de la fonction calculée est le suivant :

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

Dans le code ci-dessus, nous définissons une propriété calculée calculéeVal dont la valeur est le double de reactiveObj.count. Lorsque la valeur de reactiveObj.count change, la valeur de calculatedVal est automatiquement mise à jour.

4. watch

Dans Vue 3, nous pouvons utiliser la fonction watch pour surveiller les données dans l'instance Vue. Lorsque les données changent, nous pouvons effectuer des actions spécifiques. L'exemple de code pour utiliser la fonction watch pour surveiller les données dans une instance Vue est le suivant :

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

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

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

Dans le code ci-dessus, nous définissons une fonction watch pour surveiller les modifications dans reactiveObj.count. Lorsque la valeur de reactiveObj.count change, la fonction watch exécutera la fonction de rappel correspondante.

5. provide et inject

Dans Vue 3, nous pouvons utiliser les fonctions provide et inject pour implémenter l'injection de dépendances entre les composants. Les fonctions provide et inject permettent aux composants parents de transmettre des données aux composants enfants sans les transmettre via des accessoires et des événements. L'exemple de code pour l'injection de dépendances à l'aide des fonctions provide et inject est le suivant :

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')

Dans le code ci-dessus, nous définissons un composant ThemeProvider et un composant ThemeConsumer. Le composant ThemeProvider utilise la fonction provide pour fournir des données de thème au sous-composant ThemeConsumer. Le composant ThemeConsumer utilise la fonction inject pour obtenir les données de thème du composant parent ThemeProvider. Enfin, enregistrez les composants ThemeProvider et ThemeConsumer dans l'instance Vue.

Résumé

Ci-dessus sont les cinq fonctions et méthodes principales de Vue 3. En apprenant ces fonctions et méthodes de base, nous pouvons avoir une compréhension plus approfondie de la structure du framework et des fonctionnalités fonctionnelles de Vue 3. Dans le même temps, nous pouvons également mieux utiliser Vue 3 pour créer des applications frontales efficaces, stables et flexibles.

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!