const simpleNextTick = (function () {
return function queueNextTick (cb) {
timerFunc = () => {
return Promise.resolve().then(() => {
cb()
})
}
timerFunc()
}
})()simpleNextTick(() => {
setTimeout(console.log, 3000, 'nextTick')
})
直接写成这样。
const simpleNextTick = function queueNextTick (cb) {
timerFunc = () => {
return Promise.resolve().then(() => {
cb()
})
}
timerFunc()
}simpleNextTick(() => {
setTimeout(console.log, 3000, 'nextTick')
})
这次我们把自执行函数也简化掉
const simpleNextTick = function queueNextTick (cb) {
return Promise.resolve().then(cb)
}simpleNextTick(() => {
setTimeout(console.log, 3000, 'nextTick')
})
现在我们直接简化到最后，现在发现nextTick最核心的内容就是Promise，一个microtask。
现在我们回到vue的nextTick API官方示例
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
原来在vue内数据的更新后dom更新是要在下一个事件循环后执行的。
nextTick的使用原则主要就是解决单一事件更新数据后立即操作dom的场景。
既然我们知道了nextTick核心是利用microTasks，那么我们把简化过的nextTick和开头的sleep函数对照一下。
const simpleNextTick = function queueNextTick (cb) {
return Promise.resolve().then(cb)
}simpleNextTick(() => {
setTimeout(console.log, 3000, 'nextTick') // 也可以换成ajax请求
})
function sleep (ms) {
return new Promise(resolve => setTimeout(resolve, ms) // 也可以换成ajax请求
}
async function oneTick (ms) {
console.log('start')
await sleep(ms)
console.log('end')
}
oneTick(3000)我们看出nextTick和我么写的oneTick的执行结果是那么的相似。区别只在于nextTick是把callback包裹一个Promise返回并执行，而oneTick是用await执行一个Promise函数，而这个Promise有自己包裹的webapi函数。
那在用ajax请求的时候我们是不是直接这样使用axios可以返回Promise的库
async function getData () {
const data = await axios.get(url)
// 操作data的数据来改变dom
