vue中destroyed方法的使用说明

编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了vue中destroyed方法的使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧

我们从destroyed的字面意思可知,中文意为是“销毁”的意思,当我们离开这个页面的时候,便会调用这个函数(具体可以看看vue的的生命周期),我们常用来销毁一些监听事件及定时函数,例如:

// 销毁监听事件
destroyed() {
 window.removeEventListener('resize', this.resizeWin)
}

从上函数可知,当用户离开页面的时候便会销毁监听事件。

补充知识:vue页面刷新时,执行了哪些生命周期——谨慎使用beforeDestroy和destroyed

先来回顾一下vue实例的生命周期(以下图片来自)。

我的项目中某个组件在localstorage中存了数据,要求离开页面时需要把localstorage中相应的数据清空。于是我将清空storage的代码写在了beforeDestroy中。但在刷新页面时,storage并没有被清空。

经过测试发现,在页面刷新时,实例依次执行了beforeCreate(),created(),beforeMount(),mounted(),beforeUpdate(),updated()。并没有来得及执行destroy,与把页面关闭再重新打开的效果是一样的。所以在beforeDestroy或destroyed时执行的代码,要额外考虑一下对页面刷新的处理。

以上这篇vue中destroyed方法的使用说明就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板