如何優化vue的內存佔用?

在使用了一段時間的vue.js開發移動端h5頁面(電商類頁面,會有一些數據量較大但一次渲染就可以的商品列表)後,感覺相比於傳統的jquery(zepto)和前端模板引擎的組合能有效的提升開發效率和代碼維護性,但是也存在一些問題,比如說內存佔用問題,用vue.js開發的頁面內存佔用相比於傳統方式會更多,而且傳統的開發方式頁面渲染完後,還能對不需要的js對象進行垃圾回收,但vue.js裡面的一些指令對象、watcher對象、data數據等似乎目前都沒有找到比較好的垃圾回收的方式。

想問下對於那些只用渲染一次的頁面部分(比如數據量較大的列表頁)有沒有比較合適的內存優化方案(比如釋放指令對象、watcher對象、data對象)?

舉個例子:

比如其中的lazy指令,以及對於items這個基本上只用渲染一次的data等有沒有可以優化內存佔用的方法

& &

  • &
    & & &
    new Vue({
    data:{
    items:[]//從介面獲取數據
    }
    })
    &


  • Vue 2.0 用 v-once 即可


    哈,因為太久遠,昨天都沒記清,起床一看代碼

    unbind: function (src) {
    componentWillUnmount(src)
    }

    const componentWillUnmount = function (src) {
    let i
    let len = listeners.length
    for (i=0; i&

    更新線```````````

    囧,被發現了,是我的鍋。

    vue-lazy是我寫的一個第三方指令插件,我沒有回收處理⊙﹏⊙,回去改還不行嗎~

    vue 的組件的lifecycle中是有完善的清理工作的,基本你只需做lifecycle 的hook 中作一些涉及全局事件監聽器或者外部對象的一些清理工作就能管理好內存佔用。


    渲染完以後調用 vm.$destroy() 應該可以實現你想要的結果


    說實話,按你的場景,個人覺得你完全不需要引入框架,畢竟你的要求裡面還有一個關鍵字:性能

    而且【一次渲染】 --- 後端把數據拍到你的模板裡面就好了,比如 php + 一些模板(電商常用)


    看樣子只能等2.0了


    可以安裝一個騰訊手機管家清理內存,它能幫你手機加速減少內存佔用率,最大化的釋放更多的手機內存,直接點擊垃圾清理,自動掃描並清理軟體緩存、垃圾文件、多餘裝包、系統緩存,徹底清除軟體卸載後的殘餘

    最後使用小火箭加速功能,可以隨時燃燒空間佔用量大的進程,操作簡單


    lazy我是這麼處理的,把lazy指令放在根元素上,給要懶載入的圖片加class lazy。


    推薦閱讀:

    能否用 JS 實現一個 CSS 解釋器?
    如何理解 Facebook 的 flux 應用架構?
    js中alert函數的實現原理是什麼?
    請問js非同步和同步載入在性能優化中有什麼區別?
    vs code中,寫在<script></script>里的js代碼沒提示么?

    TAG:前端開發 | JavaScript | HTML5 | 前端工程師 | Vuejs |