JS运行机制
JS 执⾏是单线程的, 它是基于事件循环的。 事件循环⼤致分为以下⼏个步骤:
(1) 所有同步任务都在主线程上执⾏, 形成⼀个执⾏栈(execution context stack) 。
(2) 主线程之外, 还存在⼀个"任务队列"(task queue) 。 只要异步任务有了运⾏结果, 就在"任务队
列"之中放置⼀个事件。
(3) ⼀旦"执⾏栈"中的所有同步任务执⾏完毕, 系统就会读取"任务队列", 看看⾥⾯有哪些事件。 那
些对应的异步任务, 于是结束等待状态, 进⼊执⾏栈, 开始执⾏。
(4) 主线程不断重复上⾯的第三步。
————————————————
原文链接:https://blog.csdn.net/longtengg1/article/details/115576081
nextTick
最近的一次DOM更新结束之后的回调,异步执行。
原理:
1.把你设置的回调放在 参数为0的setTimeout 中执行,这样就算异步了,等待当时同步代码执行完毕再执行。
2.Vue 不止使用 setTimeout 实现nextTick;会判断promise是否存在,选择任务类型。如果promise存在,就使用微任务。
作用
- Vue是异步渲染的框架。
- data改变之后,DOM不会立刻渲染。
- $nextTick会在DOM渲染之后被触发,以获取最新的DOM节点。
- 连续多次的异步渲染,$nextTick只会执行最后一次渲染后的结果。避免不必要的计算和DOM操作。
场景
1.有时需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置,但是created与mounted函数执行时一般dom并没有渲染完毕,所以就会出现获取不到,添加不了事件的问题,这回就要用到nextTick处理
2.在使用某个第三方插件时 ,希望在vue生成的某些dom动态发生变化时重新应用该插件,也会用到该方法,这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法,例如:应用滚动插件better-scroll时
3.数据改变后获取焦点
补充
如果没有 nextTick 更新机制,那么 num 每次更新值都会触发视图更新,有了 nextTick 机制,只需要更新一次,所以 nextTick 本质是一种优化策略
场景: 如果想要在修改数据后立刻得到更新后的 DOM 结构,可以使用 Vue.$nextTick() 。
1. 把回调函数放入callbacks等待执行
2. 将执行函数放到微任务或者宏任务中
3. 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调