Vue知识点：特殊生命周期钩子

最新推荐文章于 2025-03-31 16:42:22 发布

原创最新推荐文章于 2025-03-31 16:42:22 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了Vue.js中路由组件的激活与失活两个关键钩子函数——activated和deactivated。当News组件被激活时，会打印消息并设置一个改变元素透明度的定时器；失活时，清除定时器，确保资源释放。此外，还展示了如何使用$nextTick和$refs进行焦点管理。

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

3. 具体编码：

//News.vue
<template>
   <ul>
      <li :style="{opacity}">欢迎</li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</template>

<script>
export default {
   name: 'News',
   data() {
      return{
         opacity:1,
      }
   },
   activated(){
      console.log('News组件被激活了')
      this.timer = setInterval(()=>{
         this.opacity -= 0.01
         if(this.opacity<=0){
            this.opacity = 1
         }
      },16)
   },
   deactivated(){
      console.log('News组件失活了')
      clearInterval(this.timer)
   },
   gouzi(){
      this.$nextTick(function(){
         this.$refs.inputTitle.focus()
      })
   }
}
</script>