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对象是否存在
Sep 22 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
vue的全局提示框组件实例代码
Feb 26 Javascript
vue cli 全面解析
Feb 28 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
angular6的响应式表单的实现
Oct 10 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 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue实现分页组件
2020/06/16 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
Python正确重载运算符的方法示例详解
2017/08/27 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
计算机相关的自我评价
2014/01/15 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
迎新年主持词
2015/07/06 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
利用js实现简单开关灯代码
2021/11/23 Javascript
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android