vue中destroyed方法的使用说明


Posted in Javascript onJuly 21, 2020

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

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

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

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

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

vue中destroyed方法的使用说明

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

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

以上这篇vue中destroyed方法的使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 #Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 #Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 #Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 #Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 #Javascript
JavaScript undefined及null区别实例解析
Jul 21 #Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 #Javascript
You might like
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
浅谈vue的第一个commit分析
2020/06/08 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python反射用法实例简析
2017/12/22 Python
python实现狄克斯特拉算法
2019/01/17 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python3注册全局热键的实现
2020/03/22 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
个人求职信范文分享
2014/01/06 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
公司副总经理任命书
2014/06/05 职场文书
供电工程专业求职信
2014/08/09 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
团代会邀请函
2015/02/02 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫