@hook扩展分析

初遇

问题是由一个面试题而来，
父组件可以监听到子组件的生命周期吗？
以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

 //  Parent.vue
 <Child @hook:mounted="doSomething" ></Child>
  doSomething() {
    console.log('父组件监听到 mounted 钩子函数 ...'); 
},
   //  Child.vue mounted(){ 
   console.log('子组件触发 mounted 钩子函数 ...');
 }, 
  // 以上输出顺序为：
  // 子组件触发 mounted 钩子函数 ...
 // 父组件监听到 mounted 钩子函数 ...   
1
2
3
4
5
6
7
8
9
10
11

当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听。

应用

1、替换$emit 触发父组件（如上方所述）

2、清除定时器

之前清除大屏定时器直接是beforeDestroy clearInterval，可以用更好的办法↓

export default{
  methods:{
    fun1(){
      let timer = setInterval(()=>{
      	//需要做的事情
         console.log(11111);
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}
服了，在查阅资料时，其他作者把beforeDestroy写成beforeDestory，以为写代码方式不对查半天

下面的用法有2个问题
1、vue实例中需要有这个定时器的实例，感觉有点多余;
2、 创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护;
export default{
  data(){
    timer:null  
  },
  this.timer = setInterval(()=>{
  //需要做的事情
},1000)，
beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

题外
特殊情况时以上均失效不可用时，我这里采用监听路由变化进而清除定时器

watch: {
	//监听路由
	$route:{
		handler(oldVal,newVal){// 此处判断当前页面路由是否为指定路由，是则创建定时器，否则清除定时器，用在单页面
			if (oldVal.path != '/xx/xx/xx') {
				clearInterval(this.timer)
				this.timer = null
			} else {
				this.Init();
				this.timer = setInterval(() => {
					this.Init();
				}, 1000 * 30)
			}
		},
	    deep:true, // 深度监听
	    immediate: true // 使监听在页面加载完成后执行，避免数据无变化或初进页面时监听不执行　　　　　　　　　　
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

（扩展）Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程
  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 子组件更新过程
  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 销毁过程
  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed