详解Vue中this.$nextTick（）用法

最新推荐文章于 2025-05-21 14:07:49 发布

豆腐oh

最新推荐文章于 2025-05-21 14:07:49 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js html5 css

本文链接：https://blog.youkuaiyun.com/passWordEnterX/article/details/120568700

这篇博客探讨了Vue中`this.$nextTick`和`updated`生命周期钩子的用法。`$nextTick`用于在DOM更新后执行回调，解决数据变化与DOM更新异步问题。例如，在点击按钮后切换输入框显示并尝试聚焦，直接调用`this.$refs.myInp.focus()`无效，因DOM未更新。通过`this.$nextTick`或使用`async/await`结合`$nextTick`，可以在DOM更新后正确聚焦。而`updated`钩子则在DOM更新后触发，适合执行依赖DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法：

this.$nextTick( [ callback ] )

用法：

this.$nextTick将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上，等同于updated生命周期函数

updated用法：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

示例：

下面讲解一个点击按钮是输入框聚焦的示例：

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>

<script>

// 获取到输入框
// 输入框调用事件方法focus()达到聚焦行为
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        btn(){
            this.isShow = true;
 
            this.$refs.myInp.focus(); // 没有效果
            
            // 原因: data变化更新DOM是异步的
            // 输入框还没有挂载到真实DOM上
            // 解决:
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
        }
        //async btn(){  
        //    this.isShow = true;
        //    
        //    // 扩展: await取代回调函数
        //    // $nextTick()原地返回Promise对象
        //    await this.$nextTick()
        //    this.$refs.myInp.focus()
        //}
    },
     //扩展
    updated(){  
     // this.$refs.myInp.focus()
    
    }
}
</script>

直接在methods获取DOM调用聚焦方法是没有效果的，更改之后的文本是需要 dom 更新之后才会实现的，就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中，这时候用this.$nextTick就能合理解决此问题，如果我们想进页面就处于聚焦状态的话就可以使用updated生命周期函数，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作

，