vue-router 切换视图时发生内存泄漏

[zyip]

` window.addEventListener('scrollEnd',compute,true) window.addEventListener('resize',compute,true) window.addEventListener('scroll',computeBySpeed,true) 这些事件处理函数，在切换视图时没有被注销，但是其对应的vue节点和dom节点已经不存在了

修复

/**

• Vue lazyload img plugin
• especially optimized for mobile browsers
• support umd(https://github.com/umdjs/umd)
• capable of require.js, sea.js, CommonJS
• @author: JALBAA

• @email: 116682877@qq.com */ var Vue = require('vue') Vue.lazyimg ={ install: function(Vue,options){ options = options || { fadein: false, speed: 20, nohori: false } //custom scrollEnd event if(options.speed){ var cntr = 0 var lastCntr = 0 var diff = 0 var scrollEnd = document.createEvent('HTMLEvents'); scrollEnd.initEvent('scrollEnd',true,false) scrollEnd.eventType = 'message' function enterFrame(){ if(cntr != lastCntr){ diff++ if(diff == 5){ window.dispatchEvent(scrollEnd) cntr = lastCntr } } requestAnimationFrame(enterFrame); } window.requestAnimationFrame(enterFrame) document.addEventListener('scroll',function(){ lastCntr = cntr diff = 0 cntr++ },true) } //compute scroll speed var lastPosY = document.body ? document.body.getBoundingClientRect().top : document.head.parentNode.getBoundingClientRect().top var lastPosX = document.body ? document.body.getBoundingClientRect().left : document.head.parentNode.getBoundingClientRect().left var lastSpeeds = [] var aveSpeed = 0 function getSpeed(el){ var curPosY = el ? el.getBoundingClientRect().top : 0 var curPosX = el ? el.getBoundingClientRect().left: 0 var speedY = lastPosY - curPosY var speedX = lastPosX - curPosX if(lastSpeeds.length<10){ lastSpeeds.push((speedY+speedX)/2) }else{ lastSpeeds.shift() lastSpeeds.push((speedY+speedX)/2) } var sumSpeed = 0 lastSpeeds.forEach(function(speed){ sumSpeed += speed }) aveSpeed = Math.abs(sumSpeed/lastSpeeds.length) lastPosY = curPosY lastPosX = curPosX } document.addEventListener('scroll',function(e){ if(!options.speed) return var el = null for(var i=0; i<e.target.childNodes.length; i++){ if(e.target.childNodes[i].nodeType == 1){ el = e.target.childNodes[i] break; } } getSpeed(el) },true)

  function unbind(){
    //在组件销毁时，注销它所持有的事件
    this.unbind && this.unbind();
  
  }
  
  //vue directive update
  function update(value){
    if (this.el === null) {
        return;
    }
    // console.log(1)
    var isFadeIn = this.modifiers.fadein || options.fadein
    var isNoHori = this.modifiers.nohori || options.nohori
    if(isFadeIn){
        this.el.style.opacity = 0
        this.el.style.transition = 'opacity .3s'
        this.el.style.webkitTransition = 'opacity .3s'
    }
  
    var compute = function(){
        var rect = this.el.getBoundingClientRect();
        var vpWidth = document.head.parentNode.clientWidth
        var vpHeight = document.head.parentNode.clientHeight
        var loadImg = function(){
            this.el.src = value
            this.el.addEventListener('load',onloadEnd)
            this.unbind();
            lastSpeeds = []
        }.bind(this)
        if(this.el.src == value)return
        if(isNoHori){
            if(rect.bottom >=0 && rect.top <= vpHeight){
                loadImg()
            }
        }else if(rect.bottom >=0 && rect.top <= vpHeight
                && rect.right >= 0 && rect.left <= vpWidth){
            loadImg()
        }
    }.bind(this)
    var computeBySpeed = function(){
        if(options.speed && aveSpeed > options.speed)return
        compute()
    }.bind(this)
    var onload = function(){
        compute();
        this.el.removeEventListener('load',onload)
        window.addEventListener('scrollEnd',compute,true)
        window.addEventListener('resize',compute,true)
        window.addEventListener('scroll',computeBySpeed,true)
    }.bind(this)
    var onloadEnd = function(){
        if(isFadeIn)
            this.el.style.opacity = 1
        this.el.removeEventListener('load',onloadEnd)
    }.bind(this)

  //注销事件处理函数 this.unbind=function(){ window.removeEventListener('scrollEnd',compute,true) window.removeEventListener('resize',compute,true) window.removeEventListener('scroll',computeBySpeed,true) }; this.el.addEventListener('load',onload) }

  Vue.directive('lazyload',{update,unbind})

  } };`

[wormsan]

这个似乎和 #4 #7 #3 #6 是同样的问题 我们app的跳转是新开启activity的。。所以几乎不用用router。。。没有关注到这个问题，后续我专门研究下=。=

[wormsan]

v1基本放弃了，v2对router做了较好的处理，如果还需要对v1修复的话，欢迎直接提交merge request