1、beforeDestroy
beforeDestroy周期一样平常是在组件烧毁时调用，好比利用v-if举行组件的表现隐蔽，大概页面跳转时就会调用到这个周期。
堆内存利用后肯定要注意开释，否则gc总不接纳就会导致内存走漏。
好比对dom的引用、变乱Listener、总线eventBus等，肯定要在beforeDestroy里开释解绑。
export default { name:'test', data(){ return { width: window.innerWidth, height: window.innerHeight } }, mounted() { this.resizeFunc = () => { this.width = window.innerWidth; this.height = window.innerHeight; }; window.addEventListener('resize', this.resizeFunc); }, beforeDestroy(){ window.removeEventListener('resize',this.resizeFunc); this.resizeFunc = null; } }2、利用weakmap和weakset
当vue中有Dom引用时，需要注意内存开释题目。weakset 和 weakmap对值的引用都是不计入垃圾接纳机制的。也就是说，假如其他对象都不再引用该对象，那么垃圾接纳机制会主动接纳该对象所占用的内存。
export default { name: 'test', data() { return { wp: new WeakMap() } }, mounted() { let ele = document.getElementById('con'); let handleFunc = () => { console.log(ele.innerHTML);//闭包，对ele有引用，不容易开释 } this.wp.set(ele, handleFunc);//创建节点和变乱的关系 ele.addEventListener('click', this.wp.get(ele), false); }, beforeDestroy() { this.ele.removeEventListener('click',this.wp.get(this.ele));//清算挂载变乱 } }3、路由守卫beforeRouteLeave
假如是对router举行了keep-alive，那举行页面跳转时就不会触发beforeDestroy，也就是对组件举行了缓存，不会烧毁组件，这时我们可以用路由守卫来确保开释资源。
beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 this.$destroy();//手动调用beforeDestroy开释资源，大概单独定义哪些资源需要开释 next(); //允许跳转页面 },4、移除watch
假如是手动调用监听watch的，也需要开释一下资源。
export default { data() { return { test: 'jack' } }, watch: { test(newVal, oldVal) { console.log(newVal); } }, methods:{ startWatch(){ this.unwatch = this.$watch('test',(newval,oldval)=>{ //this.$watch会返回一个取消监听的函数句柄 console.log('watch>>>',newval); }); } }, beforeDestroy() { // 移除监听 this.unwatch && this.unwatch();//实行烧毁监听 }} |
