La valeur obtenue par vue n'est pas la dernière

Vue est un framework front-end basé sur le modèle MVVM, utilisé pour créer des applications interactives d'une seule page. Lors du développement de Vue, nous rencontrons parfois un problème : la valeur obtenue n'est pas la dernière valeur.

Par exemple, nous avons une variable dans le composant Vue et nous voulons effectuer une certaine opération lorsque sa valeur change :

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">更改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'hello Vue'
      console.log(this.message)
      this.doSomething() // doSomething方法需要使用最新的message值
    },
    doSomething() {
      console.log(this.message) // 这里输出的是旧的message值
    }
  }
}
</script>

Dans le code ci-dessus, lorsque lorsque nous cliquez sur le bouton "Modifier", nous modifions la valeur du message et imprimons le dernier message. Cependant, lorsque nous appelons la méthode doSomething, nous constatons que la valeur du message de sortie n'est pas la dernière valeur "hello Vue", mais l'ancienne valeur "hello world".

Pourquoi ça ?

En fait, la mise à jour des données dans Vue est asynchrone. Lorsque nous modifions la valeur d'une variable, Vue ne répondra pas immédiatement à la mise à jour, mais ajoutera d'abord la mise à jour à une file d'attente et mettra à jour le DOM dans la prochaine boucle d'événements. Par conséquent, lorsque nous appelons la méthode doSomething, Vue attend toujours la prochaine boucle d'événements avant de répondre à la mise à jour.

Alors, comment obtenir la dernière valeur ?

Vue fournit la méthode $nextTick pour exécuter la fonction de rappel après la mise à jour du DOM. Nous pouvons écrire la méthode doSomething de manière asynchrone et obtenir la dernière valeur du message via la méthode $nextTick :

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">更改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'hello Vue'
      console.log(this.message)
      this.$nextTick(() => {
        this.doSomething() // 等到DOM更新后再执行doSomething方法
      })
    },
    doSomething() {
      console.log(this.message) // 这里输出的是最新的message值"hello Vue"
    }
  }
}
</script>

Dans le code ci-dessus, nous enveloppons la méthode doSomething avec $nextTick Lorsque le DOM est mis à jour, $ nextTick. appellera la fonction de rappel pour exécuter notre méthode afin que nous puissions obtenir la dernière valeur du message.

Résumé :

La mise à jour des données dans Vue est asynchrone Si nous voulons obtenir la dernière valeur, nous devons utiliser la méthode $nextTick pour attendre que le DOM se mette à jour avant. en exécutant la méthode correspondante. Dans le développement réel, nous devons utiliser $nextTick au moment approprié pour éviter d'obtenir l'ancienne valeur.

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!