美文网首页univue系列
vue $nextTick作用

vue $nextTick作用

作者: litielongxx | 来源:发表于2022-02-23 15:10 被阅读0次

    当页面存在一个input默认隐藏,v-if点击按钮显示后。
    需要自动聚焦。
    会发现失败,这就涉及 $nextTick。


    image.png

    1渲染时机

    当用v-if显示出input框后,页面dom根本没有立即渲染完成,自然获取不到。
    表现为渲染后浏览器直接运行可以。
    或者强行用settimeout延迟处理也行,但不符合语境。

    this.$nextTick(()=>{
            xx.aufofoucs...
     }); 
    

    $nextTick差不多可以翻译为:当dom一旦更新完成,通知里面做操作。而后渲染的涉及原生js,都会存在这个先后顺序。
    列如:
    接口请求渲染完成,针对表格做点原生操作发现获取不到。
    读取文件上传,读取后发现获取不到。
    图上的input本身不存在,后添加的获取不到。

    相关文章

      网友评论

        本文标题:vue $nextTick作用

        本文链接:https://www.haomeiwen.com/subject/fomolrtx.html