vue 回调函数用法

Vue中的回调函数主要有两个：`Vue.nextTick(callback)`和`Vue.$nextTick(callback)`。

`Vue.nextTick(callback)`会在数据发生变化，更新后执行回调函数。这个方法会在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

`Vue.$nextTick(callback)`会在DOM发生变化，更新后执行回调函数。这个方法会在下次DOM更新循环结束之后执行延迟回调。在修改DOM之后立即使用这个方法，获取更新后的DOM。

下面是一个使用`Vue.nextTick(callback)`的例子：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello Vue'
      Vue.nextTick(() => {
        console.log(this.$el.textContent) // 输出：Hello Vue
      })
    }
  }
}
</script>

下面是一个使用`Vue.$nextTick(callback)`的例子：

<template>
  <div>
    <p ref="message">{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello Vue'
      this.$nextTick(() => {
        console.log(this.$refs.message.textContent) // 输出：Hello Vue
      })
    }
  }
}
</script>