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 面向对象 继承
May 13 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
vue项目中axios使用详解
Feb 07 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
一起深入理解js中的事件对象
Feb 06 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中的正则表达式函数介绍
2012/02/27 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
php操作access数据库的方法详解
2017/02/22 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python批量更改文件名的实现方法
2017/10/29 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python如何绘制疫情图
2020/09/16 Python
安全教育心得体会
2013/12/29 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
财务工作失职检讨书
2014/11/21 职场文书
初中差生评语
2014/12/29 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
Python 全局空间和局部空间
2022/04/06 Python