测试vue内存泄漏

如果不注意释放资源，就会造成内存泄漏，看这样一个例子：
home.vue:

<template>
  <div>
   <hello v-if="show"></hello>
   
   <Button @click="toggle">开关</Button>  
   
  </div>


</template>
<script>
    import hello  from './hello.vue';
    export default {
        name: 'Home',
        components:{ hello },
        data () {
            return {
              
                show: false,
            }
        },

        methods: {
            toggle(){
                
                this.show = !this.show;
               
            }
        }
    }
</script>

hello.vue:

<template>
  <div class="hello">
    {{msg}}
  </div>
</template>

<script>

import {firstName,foo} from './tools.js';
export default {
  name: 'hello',
  mounted(){
    console.log('enter hello');

    window.addEventListener('resize',this.resizeWin,false);
  },
  beforeDestroy(){
     console.log('leave hello');
    //window.removeEventListener('resize',this.resizeWin);
  },
  data () {
    return {
      msg: 'hello,world'
    }
  },
  methods: {
    resizeWin(){
      console.log(Math.random());
    }
  }
}
</script>

如果mounted生命周期里的resize事件不注销，那么执行多次开关后，内存情况就会变成这样：

add.png

可以看到代表注册事件的黄色线一直飙升。
如果我们在beforeDestroy注销resize的话，内存就降下来了，这才是健康的：

remove.png