vue nextTick

最新推荐文章于 2025-10-07 15:42:10 发布

原创最新推荐文章于 2025-10-07 15:42:10 发布 · 216 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

nextTick() 方法通常用于延迟执行代码直到下一个 DOM 更新循环之后。这对于在数据更改后立即访问或操作更新后的 DOM 很有用

全局用法

import Vue from 'vue';


// 全局环境中使用
Vue.nextTick(() => {
  // 处理 DOM 操作
});

Vue 2 中的 $nextTick 使用

export default {
  data() {
    return {
      message: "Hello"
    };
  },
  methods: {
    changeMessage() {
      // 修改数据
      this.message = "World";
      
      // 直接获取 DOM（此时 DOM 未更新）
      console.log(this.$refs.msg.innerText); // 输出：Hello
      
      // 等待 DOM 更新后执行
      this.$nextTick(() => {
        console.log(this.$refs.msg.innerText); // 输出：World
      });
    }
  },
  template: `<div ref="msg">{{ message }}</div>`
};

Vue 3 中的 nextTick

import { ref, nextTick } from 'vue';


export default {
  setup() {
    const message = ref("Hello");
    const msgRef = ref(null);

    const updateMessage = async () => {
      message.value = "Vue 3";
      
      // 直接获取（DOM 未更新）
      console.log(msgRef.value.innerText); // 输出：Hello
      
      // 等待 DOM 更新（支持 async/await）
      await nextTick();
      console.log(msgRef.value.innerText); // 输出：Vue 3
    };

    return { message, msgRef, updateMessage };
  },
  template: `
    <div ref="msgRef">{{ message }}</div>
    <button @click="updateMessage">更新</button>
  `
};

核心区别

使用场景

数据更新后操作 DOM：修改数据后立即读取或操作新渲染的 DOM。
created 钩子中操作 DOM：在 created 中（DOM 未挂载），需用 nextTick 等待 DOM 生成。
监听 DOM 尺寸 / 位置变化：数据更新后获取元素的宽高、位置等。

总结

组件内部优先使用 this.$nextTick()（Vue 2 和 Vue 3 通用）。
全局或 Composition API 中，Vue 2 用 Vue.nextTick()，Vue 3 用导入的 nextTick。
推荐使用 async/await 语法，代码更简洁：await this.$nextTick() 或 await nextTick()。

nextTick 的核心是利用 Vue 的 DOM 更新异步机制，确保操作的是最新的 DOM 状态。