Vue学习笔记69--activated + deactivated

activated + deactivated 注：生命周期学习可参考学习笔记33

两个新的生命周期钩子

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

 1 <template>
 2   <div>
 3     <h3>News page</h3>
 4     <li :style="{opacity}">欢迎学习vue</li>
 5     <li>News 001<input type="text"></li>
 6     <li>News 002<input type="text"></li>
 7     <li>News 003<input type="text"></li>
 8   </div>
 9 </template>
10 </template>
11 
12 <script>
13 export default {
14   name: 'News',
15   data () {
16     return {
17       opacity: 1,
18     }
19   },
20   /* 
21   挂载
22    mounted () {
23      this.timer = setInterval(() => {
24        this.opacity -= 0.01
25        if (this.opacity <= 0) this.opacity = 1
26      })
27    },
28    将要销毁
29    beforeDestroy () {
30      console.log('news组件即将被销毁了')
31      clearInterval(this.timer)
32    } */
33 
34   //  激活
35   activated () {
36     this.timer = setInterval(() => {
37       console.log('news组件激活了')
38       this.opacity -= 0.01
39       if (this.opacity <= 0) this.opacity = 1
40     })
41   },
42   // 失活
43   deactivated () {
44     console.log('news组件失活了')
45     clearInterval(this.timer)
46   },
47 }
48 </script>
49 
50 <style>
51 </style>