vue异步更新，$nextTick

在Vue中，数据的更新是基于响应式系统的，并且是异步的。这意味着当你修改了数据后，Vue并不会立即更新页面，而是等待下一个事件循环tick时才进行更新。

Vue通过使用虚拟DOM和异步更新策略来提升性能。当你修改数据时，Vue会将更新存储在一个队列中，并在下一个事件循环中批量处理这些更新。这样可以避免频繁的页面重绘，提高性能。

VUE中常见异步更新场景 

1、事件处理

事件处理函数中修改数据时，Vue会将更新数据推入队列中，在下一个事件循环中更新

<template>
  <button @click="updateData">Update Data</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateData() {
      this.message = 'Updated Data'
      console.log(this.message) // 输出 'Hello Vue!'
      this.$nextTick(() => {
        console.log(this.message) // 输出 'Updated Data'
      })
    }
  }
}
</script>

2、异步操作

在异步操作中修改数据（定时器、网络请求）修改数据时，同样需要使用$nextTick方法来确保在数据更新后再进行操作

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  mounted() {
    setTimeout(() => {
      this.message = 'Updated Data'
      console.log(this.message) // 输出 'Hello Vue!'
      this.$nextTick(() => {
        console.log(this.message) // 输出 'Updated Data'
      })
    }, 1000)
  }
}
</script>