vue有一个$nexttick方法,有时候不知道怎么用它
如果知道其运行原理,使用起来则会得心应手啦

来吧展示宝贝!

先看官方介绍

在这里插入图片描述


第一原理:


理解$nexttick的原理就要提前理解js事件循环宏任务和微任务的原理
js执行宏任务时候遇到微任务(promise)或者settimeout等的时候就会把微任务放到下一轮执行而不是立刻执行,当前宏任务执行完之后再执行挂起的微任务,之后再执行下一轮宏任务;这是浏览器执行的基础;
$nexttick就类似于被挂起微任务或者挂到下一轮宏任务的settimeout一样

由此我们可以看出$nexttick就是进行了延迟执行


第二 vue项目中怎么使用$nexttick


再create函数里面执行dom操作时候(create函数执行的时候dom并没有渲染所以操作dom失败,那么使用在create函数里 n e x t t i c k 函 数 里 操 作 d o m 则 完 美 获 取 到 d o m 元 素 ; 因 为 nexttick函数里操作dom则完美获取到dom元素;因为 nexttickdomdomnexttick函数里面的事件是延迟执行的是等dom渲染完之后执行的)


第三:代码展示


create(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

总结:
1、所有操作了dom变量有没有更新dom的时候想操作dom都可以使用nexttick方法
2、所有改变了多个变量活多个方法改变了同一变量的都可以使用$nexttick延迟更新操作

Logo

前往低代码交流专区

更多推荐