1. 用nextTick()的原因:
JS运行机制(Event Loop)
JS执行是单线程的,它是基于事件循环的
1.所有同步任务都在主线程上执行,形成一个执行栈。
2.主线程之外,会存在一个任务队列,只要异步任务有了结果,就在任务队列中放置一个事件。
3.当执行栈中的所有同步任务执行完后,就会读取任务队列。那些对应的异步任务,会结束等待状态,进入执行栈。
4.主线程不断重复第三步。
这里主线程的执行过程就是一个tick,而所有的异步结果都是通过任务队列来调度。
Event Loop分为宏任务和微任务,无论是执行宏任务还是微任务,完成后都会进入到一下tick,并在两个tick之间进行UI渲染。
Vue异步更新队列(数据驱动视图)
-
由于Vue DOM更新是异步执行的,即修改数据时,视图不会立即更新,
-
只要监听数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。
-
然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。
-
等同一数据循环中的所有数据变化完成之后,再统一进行视图更新。 为了确保得到更新后的DOM,所以设置了 Vue.nextTick()方法。
2、什么是nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
第一原理:
理解$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元素;因为nexttick函数里操作dom则完美获取到dom元素;因为nexttick函数里面的事件是延迟执行的是等dom渲染完之后执行的)
3、nextTick()用法
全局中: Vue.nextTick
组件中: this.$nextTick
总结:
1、所有操作了dom变量有没有更新dom的时候想操作dom都可以使用nexttick方法
2、所有改变了多个变量活多个方法改变了同一变量的都可以使用$nexttick延迟更新操作