這篇文章主要為大家展示了“如何解決Vue依賴收集引發(fā)的問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決Vue依賴收集引發(fā)的問題”這篇文章吧。

巍山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

問題背景

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

定位問題

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

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

 

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

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

解決問題

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

1. 在data中定義的屬性前面加上$，即通知vue該屬性不需要被依賴收集，例如：javascript data() { return { $goDiagram: null } }但是這樣聲明，在template中引用時會報找不到$goDiagram屬性的錯誤，具體的原因我還沒深究，有空可以研究一下。

2. 不在data中聲明，直接在賦值的時候聲明this.goDiagram = diagram。這同樣會遇到第一種方案的問題，模板中會提示找不到goDiagram屬性。

3. 不在data中聲明，而是利用$options來存儲goDiagram，例如：

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

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

總結(jié)

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

1. 如何通過chrome的開發(fā)者工具，去快速地定位代碼中存在的內(nèi)存問題

2. 不要盲目的將屬性都掛載到data選項中，一些常量我們可以采取上面提到的幾種方式來定義，以此來作為一種優(yōu)化手段

以上是“如何解決Vue依賴收集引發(fā)的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：如何解決Vue依賴收集引發(fā)的問題-創(chuàng)新互聯(lián)
本文地址：http://jinyejixie.com/article36/decspg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、小程序開發(fā)、網(wǎng)站制作、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)