十、两个新生命周期钩子 activated/deactivated

1、需求

每次切入到 News 组件其内容就闪烁

2、CODE

1、News.vue

<template><ul :style="{opacity}"><li>大新闻 <input type='text'/></li><li>特大新闻 <input type='text'/></li><li>炒鸡大新闻 <input type='text'/></li></ul>
</template><script>export default {name:'News',data(){return {opacity: 1,timer: null}},mounted(){this.timer = setInterval(()=>{console.log('变化进行中~')this.opacity -= 0.1if(this.opacity <= 0) this.opacity = 1}, 100)},beforeDestroy() {clearInterval(this.timer)}}
</script>

2、Result

闪烁没问题，但是切换到其他组件它依然在闪烁（别忘了上一节 News 已经 keep-alive 了！）

3、两个路由新钩子登场！

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
具体名字：
1. activated 路由组件被激活时触发
2. deactivated 路由组件失活时触发

4、解决第2条遇到的问题

<script>export default {name:'News',data(){return {opacity: 1,timer: null}},activated(){this.timer = setInterval(()=>{console.log('变化进行中~')this.opacity -= 0.1if(this.opacity <= 0) this.opacity = 1}, 100)},deactivated(){clearInterval(this.timer)}}
</script>

十、【Vue-Router】两个新生命周期钩子 activated/deactivated相关推荐

vue createApp()，mount()，生命周期钩子函数执行顺序
之前一直以为在调用createApp()时执行beforeCreate.created这两个钩子函数,在mount()时才执行beforeMount.mounted这两个钩子函数但实际上,在crea ...
vue学习---生命周期钩子activated，deactivated
之前学习了基础的生命周期钩子(beforeCreate,created,beforeMonted,mounted.beforUpdate,update,beforDestroy,destroyed) ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
vue脚手架的安装、生命周期、文件导入格式、局部组件和全局组件、动态添加属性和方法、插槽、传值
----------------------------------- DOS命令进入dos: win+r 切换盘符: d: 查看: dir 打开文件夹: cd 文件夹的名字返回上一级目录 ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
vue知识（四）生命周期、钩子函数、路由
文章目录一.生命周期 (一)vue生命周期二.钩子函数 (一)钩子函数 (二)4大阶段8个方法 (1)如何知道vue生命周期到达了什么阶段? (2)钩子函数有哪些 (三)初始化 (1)new Vu ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
-Vue生命周期钩子
1.1-Vue生命周期钩子介绍 vue生命周期钩子官方文档: 官方文档图解介绍:生命周期图示官方文档详细介绍:vue生命周期钩子介绍 ==vue生命周期钩子介绍 : vue从创建到销毁过程中,会执行 ...

十、【Vue-Router】两个新生命周期钩子 activated/deactivated

十、两个新生命周期钩子 activated/deactivated

1、需求

2、CODE

1、News.vue

2、Result

3、两个路由新钩子登场！

4、解决第2条遇到的问题

十、【Vue-Router】两个新生命周期钩子 activated/deactivated相关推荐

最新文章

热门文章