這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識(shí)，希望對大家有所幫助
一、NextTick是什么
官方對其的定義
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM
什么意思呢？
我們可以理解成，Vue?在更新?DOM?時(shí)是異步執(zhí)行的。當(dāng)數(shù)據(jù)發(fā)生變化，Vue將開啟一個(gè)異步更新隊(duì)列，視圖需要等隊(duì)列中所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行更新
舉例一下
Html結(jié)構(gòu)
<div id="app"> {{ message }} </div>
構(gòu)建一個(gè)vue實(shí)例
const vm = new Vue({
el: '#app',
data: {
message: '原始值'
}
})
修改message
this.message = '修改后的值1' this.message = '修改后的值2' this.message = '修改后的值3'
這時(shí)候想獲取頁面最新的DOM節(jié)點(diǎn)，卻發(fā)現(xiàn)獲取到的是舊值
console.log(vm.$el.textContent) // 原始值
這是因?yàn)?code>message數(shù)據(jù)在發(fā)現(xiàn)變化的時(shí)候，vue并不會(huì)立刻去更新Dom，而是將修改數(shù)據(jù)的操作放在了一個(gè)異步操作隊(duì)列中
如果我們一直修改相同數(shù)據(jù)，異步操作隊(duì)列還會(huì)進(jìn)行去重
等待同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后，會(huì)將隊(duì)列中的事件拿來進(jìn)行處理，進(jìn)行DOM的更新
為什么要有nexttick
舉個(gè)例子
{{num}}
for(let i=0; i<100000; i++){
num = i
}
如果沒有?nextTick?更新機(jī)制，那么?num?每次更新值都會(huì)觸發(fā)視圖更新(上面這段代碼也就是會(huì)更新10萬次視圖)，有了nextTick機(jī)制，只需要更新一次，所以nextTick本質(zhì)是一種優(yōu)化策略
二、使用場景
如果想要在修改數(shù)據(jù)后立刻得到更新后的DOM結(jié)構(gòu)，可以使用Vue.nextTick()
第一個(gè)參數(shù)為：回調(diào)函數(shù)（可以獲取最近的DOM結(jié)構(gòu)）
第二個(gè)參數(shù)為：執(zhí)行函數(shù)上下文
// 修改數(shù)據(jù)
vm.message = '修改后的值'
// DOM 還沒有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () {
// DOM 更新了
console.log(vm.$el.textContent) // 修改后的值
})
組件內(nèi)使用?vm.$nextTick()?實(shí)例方法只需要通過this.$nextTick()，并且回調(diào)函數(shù)中的?this?將自動(dòng)綁定到當(dāng)前的?Vue?實(shí)例上
this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '修改后的值'
})
$nextTick()?會(huì)返回一個(gè)?Promise?對象，可以是用async/await完成相同作用的事情
this.message = '修改后的值' console.log(this.$el.textContent) // => '原始的值' await this.$nextTick() console.log(this.$el.textContent) // => '修改后的值'
三、實(shí)現(xiàn)原理
源碼位置：/src/core/util/next-tick.js
callbacks也就是異步操作隊(duì)列
callbacks新增回調(diào)函數(shù)后又執(zhí)行了timerFunc函數(shù)，pending是用來標(biāo)識(shí)同一個(gè)時(shí)間只能執(zhí)行一次
export function nextTick(cb?: Function, ctx?: Object) {
let _resolve;
// cb 回調(diào)函數(shù)會(huì)經(jīng)統(tǒng)一處理壓入 callbacks 數(shù)組
callbacks.push(() => {
if (cb) {
// 給 cb 回調(diào)函數(shù)執(zhí)行加上了 try-catch 錯(cuò)誤處理
try {
cb.call(ctx);
} catch (e) {
handleError(e, ctx, 'nextTick');
}
} else if (_resolve) {
_resolve(ctx);
}
});
// 執(zhí)行異步延遲函數(shù) timerFunc
if (!pending) {
pending = true;
timerFunc();
}
// 當(dāng) nextTick 沒有傳入函數(shù)參數(shù)的時(shí)候，返回一個(gè) Promise 化的調(diào)用
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve;
});
}
}
timerFunc函數(shù)定義，這里是根據(jù)當(dāng)前環(huán)境支持什么方法則確定調(diào)用哪個(gè)，分別有：
Promise.then、MutationObserver、setImmediate、setTimeout
通過上面任意一種方法，進(jìn)行降級操作
export let isUsingMicroTask = false
if (typeof Promise !== 'undefined' && isNative(Promise)) {
//判斷1：是否原生支持Promise
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
//判斷2：是否原生支持MutationObserver
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
//判斷3：是否原生支持setImmediate
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
//判斷4：上面都不行，直接用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
無論是微任務(wù)還是宏任務(wù)，都會(huì)放到flushCallbacks使用
這里將callbacks里面的函數(shù)復(fù)制一份，同時(shí)callbacks置空
依次執(zhí)行callbacks里面的函數(shù)文章來源：http://www.zghlxwxcb.cn/news/detail-836796.html
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
小結(jié)：文章來源地址http://www.zghlxwxcb.cn/news/detail-836796.html
- 把回調(diào)函數(shù)放入callbacks等待執(zhí)行
- 將執(zhí)行函數(shù)放到微任務(wù)或者宏任務(wù)中
- 事件循環(huán)到了微任務(wù)或者宏任務(wù)，執(zhí)行函數(shù)依次執(zhí)行callbacks中的回調(diào)
參考文獻(xiàn)
- https://juejin.cn/post/6844904147804749832
到了這里，關(guān)于Vue中的$nextTick有什么作用？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[word] word定時(shí)自動(dòng)保存功能的作用是什么 #知識(shí)分享#學(xué)習(xí)方法#媒體](https://imgs.yssmx.com/Uploads/2024/02/833506-1.jpeg)
