前言

想必很多小伙伴在使用vue時(shí)，都遇到過(guò)明明修改data里的數(shù)據(jù)了，但是視圖卻不更新的情況吧，這時(shí)候有經(jīng)驗(yàn)的小伙伴，二話(huà)不說(shuō)直接調(diào)用this.$forceupdate()強(qiáng)制更新頁(yè)面，管他啥情況，刷就完事了，我屬于是整個(gè)一個(gè)大無(wú)語(yǔ)。

$nexttick

將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動(dòng)綁定到調(diào)用它的實(shí)例上。

上面摘抄自vue官網(wǎng)，很多小伙伴可能看不懂，首先你要先知道vue的異步更新隊(duì)列。

可能你還沒(méi)有注意到，Vue是異步執(zhí)行DOM更新的，一旦觀察到數(shù)據(jù)變化，Vue就會(huì)開(kāi)啟一個(gè)隊(duì)列，然后把在同一個(gè)事件循環(huán)(event loop)中觀察到的數(shù)據(jù)變化的watcher推送進(jìn)這個(gè)隊(duì)列。如果這個(gè)watcher被觸發(fā)多次，只會(huì)被推送到隊(duì)列一次。這種緩沖行為可以有效去掉重復(fù)數(shù)據(jù)造成不必要的計(jì)算和DOM操作。而在下一個(gè)事件循環(huán)時(shí)，Vue會(huì)清空隊(duì)列，并進(jìn)行必要的DOM更新。

“說(shuō)的啥玩意兒，一句沒(méi)看懂”

“蒸滴撈，這都看不懂，給你打個(gè)比方，如果你要修改一個(gè)數(shù)據(jù)，還連續(xù)修改了很多次，程序總不能不斷更新n次視圖叭，這也太消耗性能了，所以實(shí)際上vue只會(huì)在你改了半天數(shù)據(jù)后，對(duì)你最終的結(jié)果進(jìn)行更新。懂了嗎？”

“哇，這么牛嗎，那nextick是怎么回事呢？”

“聽(tīng)好了，哥一句話(huà)讓你頓悟，它其實(shí)就是用來(lái)知道什么時(shí)候DOM更新完成的。”

“666，不明覺(jué)厲，但是知道了有什么用呢？”

“比如你在修改數(shù)據(jù)之后，想要操作dom，你經(jīng)常會(huì)發(fā)現(xiàn)獲取到dom綁定的值還是舊值”

小明突然大聲喊道：“啊對(duì)對(duì)對(duì)，就是這樣，煩死我了，怎么解決它呢”

“別急，你要先知道為什么，其實(shí)就是剛剛說(shuō)的，你改了數(shù)據(jù)，它還擱那兒排序等著看你最后的結(jié)果呢，這時(shí)候dom還沒(méi)更新。所以如果你想拿到新值，nexttick就派上用場(chǎng)了。因?yàn)樗苤纃om的更新時(shí)間，你就可以在它的回調(diào)函數(shù)里去進(jìn)行操作，就能拿到新值了”

“哇，學(xué)到了，感謝大佬，還有個(gè)問(wèn)題，怎么我總聽(tīng)說(shuō)別人用$nexttick更新視圖，我聽(tīng)你這意思它并沒(méi)有起到更新視圖的作用啊”

“小伙子有長(zhǎng)進(jìn)，還能看出點(diǎn)東西。是的，網(wǎng)上總有些人亂扯，說(shuō)用$nexttick更新視圖，其實(shí)它只是讓你的操作在視圖更新后才執(zhí)行而已”

“好的，謝謝大佬，我這就拿個(gè)小本本記下來(lái)”

$set

向響應(yīng)式對(duì)象中添加一個(gè) property，并確保這個(gè)新 property 同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新 property，因?yàn)?Vue 無(wú)法探測(cè)普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

數(shù)據(jù)更新但視圖沒(méi)更新，這種情況往往是我們定義了個(gè)對(duì)象，給這個(gè)對(duì)象添加了新的屬性。

我們要知道，vue2的雙向綁定原理它是通過(guò)Object.defineProperty()實(shí)現(xiàn)的，在初始化時(shí)，vue會(huì)把data中的數(shù)據(jù)加工成響應(yīng)式的。然而如果你往這個(gè)數(shù)據(jù)上添加了新屬性，顯然，它沒(méi)有被加工成響應(yīng)式數(shù)據(jù)，那么視圖怎么會(huì)更新呢？

“那我該怎么做才能刷新視圖呢？”

“你分析一下就能想到，無(wú)非就是兩種方案，一種是把新加的屬性添加響應(yīng)式，一種就是管他響應(yīng)不響應(yīng)的，用硬辦法強(qiáng)制刷新下頁(yè)面”

“愿聞其翔”

“第一種就是這里要說(shuō)的$set，這是vue提供的api，你用它給對(duì)象添加屬性就可以了”

“好的，我去看看怎么用”

“不用麻煩了，很簡(jiǎn)單的，看下面”

// 錯(cuò)誤寫(xiě)法：
this.$set(key,value)（ps: 可能是vue1.0的寫(xiě)法）
mounted () {
? ? this.$set(this.student.age, 24)
}
// 正確寫(xiě)法：
this.$set(this.data,”key”,value')

$forceupdate

迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

$forceUpdate的原理很簡(jiǎn)單，即使強(qiáng)制觸發(fā)update聲明周期，重新渲染下dom：

Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    if (vm._watcher) {
        vm._watcher.update()
    }
}

總結(jié)

$nexttick并不是真正意義上的更新視圖，而是等視圖更新后再執(zhí)行某些操作

雖然 $ forceUpdate和$set都能起到更新視圖的效果，但是前者并不推薦使用，一是，官方都說(shuō)了，如果你都到了要用 $ forceupdate的地步了，那你十有八九是操作有問(wèn)題；二是能用 $ set解決的問(wèn)題，為什么要用$forceupdate這種更消耗性能的方法呢，如果用了，估計(jì)是你偷懶！

到此這篇關(guān)于vue中$nexttick,$set,$forceupdate的區(qū)別的文章就介紹到這了,更多相關(guān)vue $nexttick,$set,$forceupdate內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論