vueで取得した値が最新ではありません

Vue は、MVVM パターンに基づくフロントエンド フレームワークで、インタラクティブな単一ページ アプリケーションの構築に使用されます。 Vue の開発中に、取得された値が最新の値ではないという問題が発生することがあります。

たとえば、Vue コンポーネントに変数があり、その値が変更されたときに特定の操作を実行したいとします。

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

上記のコードでは、「変更」ボタンをクリックしたときでは、message の値を変更し、最新のメッセージを出力します。ただし、doSomething メソッドを呼び出すと、出力メッセージの値が最新の値「hello Vue」ではなく、古い値「hello world」であることがわかります。 ＃＃＃＃＃＃どうしてこれなの？

実際、Vue でのデータの更新は非同期です。変数の値を変更すると、Vue は更新にすぐに応答せず、まず更新をキューに追加し、次のイベント ループで DOM を更新します。したがって、 doSomething メソッドを呼び出すと、Vue は更新に応答する前に次のイベント ループを待ち続けます。

では、最新の値を取得するにはどうすればよいでしょうか?

Vue は、DOM が更新された後にコールバック関数を実行するための $nextTick メソッドを提供します。 doSomething メソッドを非同期的に記述し、$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>

上記のコードでは、doSomething メソッドを $nextTick でラップします。DOM が更新されると、$nextTick が呼び出します。最新のメッセージ値を取得できるようにメソッドを実行するコールバック関数。

概要:

Vue でのデータの更新は非同期です。最新の値を取得したい場合は、対応するメソッドを実行する前に、$nextTick メソッドを使用して DOM が更新されるのを待つ必要があります。方法。実際の開発では、古い値を取得しないように、適切なタイミングで $nextTick を使用する必要があります。

以上がvueで取得した値が最新ではありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。