$nextTick方法的作用

self-abasedAshuai

已于 2023-01-16 11:17:01 修改

阅读量234

点赞数

文章标签： javascript 前端 html5

于 2023-01-16 11:14:55 首次发布

本文链接：https://blog.csdn.net/qq_63524016/article/details/128701910

版权

$nextTick方法用于在Vue中等待组件DOM更新后执行回调，例如在试图获取并聚焦输入框时。如果直接调用focus()，可能因DOM未渲染完成而失败。使用$nextTick确保在元素渲染完毕后执行相关操作，如调用focus()，这样可以可靠地访问和操作DOM元素。

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

$nextTick方法的作用：就是当页面上元素被重新渲染之后才会指定回调函数中的代码

例子

这里展示的是让输入框自动获得焦点的例子

// 通过$refs获取input的dom对象然后调用focus()方法让文本框获得焦点
// 第一个refs拿到的是组件saveTagInput，这个组件通过refs拿到HTML元素input,input自带focus方法

          this.$refs.saveTagInput.$refs.input.focus();

我们直接调用focous()的话，如果dom元素还没完全渲染出来，那么我们是获取不到dom元素的的。这个时候就需要用到$nextTick方法

this.$nextTick(_ => { //这里的 _ 只是起到占位作用
        // 通过$refs获取input的dom对象然后调用focus()方法让文本框获得焦点
          this.$refs.saveTagInput.$refs.input.focus();
        });