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 动态添加表格行
Jun 22 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
理解 JavaScript Scoping & Hoisting(二)
Nov 18 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 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函数utf8转gb2312编码
2006/12/21 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简单讲解Python中的闭包
2015/08/11 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
班级安全教育实施方案
2014/02/23 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
政风行风建设整改方案
2014/10/27 职场文书
外贸英文求职信范文
2015/03/19 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
幼儿园六一主持词
2015/06/30 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫