vue的$nexttick原理

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

来吧展示宝贝！

先看官方介绍

---

第一原理：

---

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

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

---

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

---

再create函数里面执行dom操作时候（create函数执行的时候dom并没有渲染所以操作dom失败，那么使用在create函数里$nexttick函数里操作dom则完美获取到dom元素；因为$nexttick函数里面的事件是延迟执行的是等dom渲染完之后执行的）

---

第三：代码展示

---

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

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