vue中destroyed方法的使用说明
更新时间：2020年07月21日 11:16:27 作者：小鱼儿游啊~游
这篇文章主要介绍了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方法的使用说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何利用Vue3实现一个可左右滑动操作组件，文中的示例代码讲解详细，对我们学习Vue有一定帮助，感兴趣的可以学一下2022-11-11
这篇文章主要介绍了vue2实现封装动态表单组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
实习工作需要根据表格的状态字段来设置列的样式,所以这篇文章主要给大家介绍了关于element plus如何为表格某列数据文字设置颜色样式的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue实现拖动左侧导航栏变大变小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本文主要介绍了Vue3封装自动滚动列表指令(含网页缩放滚动问题），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
本文主要介绍了vue项目中实现el-dialog组件可拖拽效果，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了vue之封装多个组件调用同一接口的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了关于this.$refs获取不到dom的可能原因及解决方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要给大家介绍了Vue实现订单支付倒计时功能,倒计时这要运用在创建订单后15分钟内进行支付,否则订单取消,本文结合示例代码给大家详细讲解,需要的朋友可以参考下2023-08-08
vue3中使用vuedraggable实现拖拽el-tree数据分组功能
这篇文章主要介绍了vue3中使用vuedraggable实现拖拽el-tree数据分组功能,可以实现单个拖拽、双击添加、按住ctrl键实现多个添加,或者按住shift键实现范围添加,添加到框中的数据,还能拖拽排序,需要的朋友可以参考下2024-02-02
最新评论