nextTick的理解

作者:Keysqiu
创建时间:2025-11-30 18:19:02 最后一次修改时间:2025-12-02 11:40:04
Categories: Tags:

其实就是在DOM内容完全更新了之后再执行callback中的操作,避免拿到脏DOM
常用于需要操作更新后 DOM 的场景,比如获取元素尺寸、聚焦输入框、初始化第三方库等。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated!'; // 修改数据
      // ❌ 此时 DOM 还未更新
      console.log(this.$el.textContent); // 可能还是 'Hello'
      // ✅ 等 DOM 更新后再执行
      this.$nextTick(() => {
        console.log(this.$el.textContent); // 现在是 'Updated!'
      });
    }
  }
}