Nilai yang diperolehi oleh vue bukanlah yang terkini

Vue ialah rangka kerja bahagian hadapan berdasarkan corak MVVM, digunakan untuk membina aplikasi satu halaman interaktif. Semasa pembangunan Vue, kadangkala kami menghadapi masalah: nilai yang diperolehi bukan nilai terkini.

Sebagai contoh, kami mempunyai pembolehubah dalam komponen Vue, dan kami mahu melaksanakan operasi tertentu apabila nilainya berubah:

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

Dalam kod di atas, apabila butang "Tukar" diklik , kami menukar nilai mesej dan mencetak mesej terkini. Walau bagaimanapun, apabila kita memanggil kaedah doSomething, kita mendapati bahawa nilai mesej output bukanlah nilai terkini "hello Vue", tetapi nilai lama "hello world".

Kenapa ni?

Malah, mengemas kini data dalam Vue adalah tidak segerak. Apabila kami menukar nilai pembolehubah, Vue tidak akan membalas kemas kini dengan segera, sebaliknya, ia akan menambah kemas kini pada baris gilir dan mengemas kini DOM dalam gelung acara seterusnya. Oleh itu, apabila kami memanggil kaedah doSomething, Vue masih menunggu gelung acara seterusnya sebelum membalas kemas kini.

Jadi, bagaimana untuk mendapatkan nilai terkini?

Vue menyediakan kaedah $nextTick, yang digunakan untuk melaksanakan fungsi panggil balik selepas DOM dikemas kini. Kami boleh menulis kaedah doSomething secara tidak segerak dan mendapatkan nilai mesej terkini melalui kaedah $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>

Dalam kod di atas, kami membalut kaedah doSomething dengan $nextTick Apabila DOM dikemas kini, $nextTick akan Memanggil fungsi panggil balik untuk melaksanakan kaedah kami supaya kami boleh mendapatkan nilai mesej terkini.

Ringkasan:

Mengemas kini data dalam Vue adalah tidak segerak Jika kita ingin mendapatkan nilai terkini, kita perlu menggunakan kaedah $nextTick untuk menunggu DOM dikemas kini sebelum melaksanakan yang sepadan. kaedah. Dalam pembangunan sebenar, kita perlu menggunakan $nextTick pada masa yang sesuai untuk mengelak daripada mendapat nilai lama.

Atas ialah kandungan terperinci Nilai yang diperolehi oleh vue bukanlah yang terkini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!