快捷導(dǎo)航

詳解Vue依賴(lài)收集引發(fā)的問(wèn)題

更新時(shí)間：2019年04月22日 11:11:54 作者：DanceOnBeat

這篇文章主要介紹了Vue依賴(lài)收集引發(fā)的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

問(wèn)題背景

在我們的項(xiàng)目中有一個(gè)可視化配置的模塊，是通過(guò)go.js生成canvas來(lái)實(shí)現(xiàn)的。但是，我們發(fā)現(xiàn)這個(gè)模塊在瀏覽器中經(jīng)常會(huì)引起該tab頁(yè)崩潰。開(kāi)啟chrome的任務(wù)管理器一看，進(jìn)入該頁(yè)面內(nèi)存和cpu就會(huì)暴漲，內(nèi)存經(jīng)常會(huì)飆到700多M。但是我們的canvas實(shí)際的像素只有約500x500，根據(jù)一些粗略的計(jì)算，大概只占了1M的內(nèi)存，這個(gè)計(jì)算過(guò)程可參考100*100的 canvas 占多少內(nèi)存。那么我們這700M內(nèi)存是哪里來(lái)的呢？

定位問(wèn)題

我們可以使用chrome開(kāi)發(fā)者工具來(lái)分析我們的調(diào)用棧。這邊我是先通過(guò)Performance來(lái)幫助我們定位問(wèn)題，它會(huì)幫我們生成一段過(guò)程中一些數(shù)據(jù)的變化，包括js堆內(nèi)存、dom節(jié)點(diǎn)數(shù)量、動(dòng)畫(huà)幀等數(shù)據(jù)，如圖：

這是切換至一個(gè)canvas畫(huà)布較大的一個(gè)模塊的performance分析表現(xiàn)，可以看到占用了472M的內(nèi)存。下面折線(xiàn)圖藍(lán)色部分是js堆內(nèi)存的變化，而Main下面黃色與紫色的矩形框就是我們的調(diào)用棧，上下兩部分是按照時(shí)間一一對(duì)應(yīng)的?？梢钥吹?，藍(lán)色的折線(xiàn)呈高低起伏的態(tài)勢(shì)，GC回收之后低點(diǎn)基本和高點(diǎn)持平，因此可以斷定幾乎不存在內(nèi)存泄漏的問(wèn)題。然后我們可以放大去看一看，內(nèi)存升高的時(shí)候，js做了些什么事情，找一找規(guī)律。

我們隨機(jī)找一段內(nèi)存增長(zhǎng)的區(qū)域，可以看到在內(nèi)存增長(zhǎng)的過(guò)程中，最為頻繁調(diào)用的就是Observer相關(guān)的代碼。但是就這么看，我們不能夠明白Observer是在干什么。此時(shí)我們可以借用Memory選項(xiàng)中的Allocation Sampling按照javascript function來(lái)查看內(nèi)存分配，我們同樣錄制以上的一段操作。

此時(shí)我們能夠清楚的看到，的確是這個(gè)Observer在作怪。同時(shí)，我們可以看到這是vue的代碼，點(diǎn)擊右邊的文件查看source code，就可以清楚的明白這就是vue在執(zhí)行依賴(lài)收集的操作，此時(shí)會(huì)給屬性添加watcher。那我們這里為什么會(huì)有如此多的屬性被添加了watcher呢？看了一下代碼，原來(lái)是我把go.js的一個(gè)實(shí)例掛到了vue的data選項(xiàng)中，放到data中的屬性會(huì)被vue執(zhí)行依賴(lài)收集的相關(guān)操作，而這個(gè)實(shí)例擁有非常多的嵌套屬性，全部都會(huì)被添加watcher。其實(shí)，我們只是想單純的存儲(chǔ)一下這個(gè)實(shí)例，供我們后續(xù)調(diào)用其相關(guān)的方法，添加watcher對(duì)我們來(lái)說(shuō)完全沒(méi)有意義，那我們?nèi)绾伪苊膺@樣的問(wèn)題呢？

解決問(wèn)題

上網(wǎng)搜索了相關(guān)的解決方案，大概有如下幾種：

在data中定義的屬性前面加上$，即通知vue該屬性不需要被依賴(lài)收集，例如：javascript data() { return { $goDiagram: null } }但是這樣聲明，在template中引用時(shí)會(huì)報(bào)找不到$goDiagram屬性的錯(cuò)誤，具體的原因我還沒(méi)深究，有空可以研究一下。
不在data中聲明，直接在賦值的時(shí)候聲明this.goDiagram = diagram。這同樣會(huì)遇到第一種方案的問(wèn)題，模板中會(huì)提示找不到goDiagram屬性。
不在data中聲明，而是利用$options來(lái)存儲(chǔ)goDiagram，例如：

export default {
 goDiagram: null,
 mounted() {
  this.$options.goDiagram = xxx
 }
}

這應(yīng)該是比較好的一個(gè)方法，vue官方中也說(shuō)明了$options用來(lái)包含自定義屬性，例如我們平時(shí)引入的常量或是枚舉類(lèi)型，我們也不希望它們被添加無(wú)意義的watcher，因此可以通過(guò)這種方式來(lái)定義，在template中引用時(shí)只需要{{$options.xxx}}即可。這種方式唯一的缺點(diǎn)就是不能像data那樣一眼望去就能清楚地知道你定義了什么屬性。
項(xiàng)目中我采用了第一種方式，經(jīng)過(guò)修改后內(nèi)存占用量減少到原來(lái)的1/5到1/6，可以說(shuō)效果非常好，再也不會(huì)出現(xiàn)瀏覽器崩潰的情況了。

總結(jié)

通過(guò)這樣的一個(gè)問(wèn)題，我們主要能夠?qū)W習(xí)到兩點(diǎn)：