vue有关$nextClick的理解

最新推荐文章于 2024-05-16 08:29:16 发布

一只有梦想的爬虫

最新推荐文章于 2024-05-16 08:29:16 发布

阅读量1.3w

点赞数 2

分类专栏： vue方法文章标签： vue有关$nextClick

本文链接：https://blog.csdn.net/qq_15827053/article/details/88848150

版权

vue方法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

之前工作中遇到过代码执行顺序的问题一般会用setTimeout的延时方法
之后开始用vue研究了下vue的周期原理发现vue有Vue.nextTick
的方法，具体解析有官方文档
我平时工作中一般用的场景两个地方
1、就是在vue生命周期creat()创建初始，一定要把对dom的操作放在Vue.nextTick()中
因为vue在creat阶段并没有任何对页面的渲染，这时候进行的操作没有任何作用，所以需要Vue.nextTick()方法等待vue的dom渲染完成之后渲染

2、vue对页面数据变化的监控操作
类似于setTimeout延时应用，等待dom更新完立马触发，相当于异步微任务，具体简单用法就如下面编码一样

 this.$nextTick(() => {
               for(var i in this.editForm){
                 this.editForm[i] = row[i]
               }
               this.editForm.id = row.id
            })