vue实现响应式并不是数据放生变化之后DOM立即变化,而是按照一定的策略去进行DOM的更新具体来说,异步执行的运行机制如下:
(1)所有同步人物都在主线程上执行,形成一个执行栈(ecxecution context stack)
(2)主线程之外,还存在一个“任务队列”(task queue)只要异步任务有了运行结果,就在“任务队列”之中放置一个事件
(3)一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,看看里面有哪些事件,哪些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步
nextTick运行原理
1、同步代码执行
2、查找异步队列
3、推入执行栈
4、执行Vue.nextTick[事件循环1]
5、查找异步队列,推入执行栈,执行Vue.nextTick[事件循环2]
nextTick应用场景
在Vue生命周期的creact()钩子函数进行的dom操作一定要放在Vue.nextTick()的回调函数中
在Vue生命周期函数中created钩子函数中:DOM并没有进行任何渲染,而此时进行DOM操作无异于是徒劳的,所以此处一定将DOM操作的js代码放进Vue.nextTick回调函数中,与之对应的就是mounted()
在数据变化后要执行某个回调函数,这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.next()回调函数中