this.$nextick
2021-01-13 16:05:37 4 举报AI智能生成
vue中nextick知识点导图
作者其他创作
大纲/内容
vue中nextick
一、js的事件执行机制
Event loop
宏任务、微任务
二、了解vue中如何处理异步任务
1.vue中的异步任务会被放在一个任务队列中
2.直到下一次DOM更新才会执行
三、了解nextick的原理实现
1、利用微任务和宏任务 来控制队列执行顺序
2、优先使用Promise，若不支持；使用MutationObsever (2.5+已删除存在兼容问题，这个并不是利用这个属性监听dom变化，而是利用它是微任务的特性)
3、降级为宏任务，宏任务中优先使用setImmediate>MessageChannel>setTimeout 0
四、为什么要采用异步更新视图
1、如果这时候没有异步更新视图，那么每次操作DOM都会触发更新视图，这是非常消耗性能的
2、 所以Vue.js实现了一个queue队列，在下一个tick的时候会统一执行queue中Watcher的run
3、同时，拥有相同id的Watcher不会被重复加入到该queue中去，所以不会执行1000次Watcher的run
五、为什么要优先使用microtask（微任务）？
先了解一下event loop中的任务执行顺序
1、JS 的 event loop 执行时会区分 task 和 microtask引擎在每个 task 执行完毕，从队列中取下一个 task 来执行之前，会先执行完所有 microtask 队列中的 microtask。
2、setTimeout 回调会被分配到一个新的 task 中执行，而 Promise 的 resolver、MutationObserver 的回调都会被安排到一个新的 microtask 中执行，会比 setTimeout 产生的 task 先执行。
3、要创建一个新的 microtask，优先使用 Promise，如果浏览器不支持，再尝试 MutationObserver。最后在尝试setTimeout
原因
1、根据 HTML Standard，在每个 task 运行完以后，UI 都会重渲染
2、所以在 microtask 中就完成数据更新，当前 task 结束就可以得到最新的 UI 了。
3、反之如果新建一个 task 来做数据更新，那么渲染就会进行两次。所以如果使用宏任务可能造成二次渲染。
收藏
0 条评论
下一页
