vue中的一些实战技巧之如何监听钩子函数

1. 内部监听生命周期函数this.$once/$on('hook:钩子函数',callback)

在绘制canvas的时候去监听窗口的大小来设置画布，下面代码乍看是没什么问题？在我们刚用的人觉得无伤大雅(悠然见南山);

在他们哪些大佬面前(一览众山小),这样写不是很好，应该将监听resize事件与销毁resize事件放到一起，现在两段代码分开而且相隔几百行代码，可读性比较差

<template>
  <div class="home">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
export default {
  data(){
    return{
    canvas:null
    }
  },
  mounted() {
    this.canvas= document.getElementById('canvas');
    this.canvas.width=window.innerWidth;
    this.canvas.height=window.innerHeight;
    window.addEventListener('resize',this.changeSize);
  },
  methods:{
    changeSize(){
      this.canvas.width=window.innerWidth;
      this.canvas.height=window.innerHeight;
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize',this.changeSize);
  }
}
</script>

所以大佬就用了不一样的写法,直接少写了beforeDestroy

<template>
  <div class="home">
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
export default {
  mounted() {
    this.canvas= document.getElementById('canvas');
    this.canvas.width=window.innerWidth;
    this.canvas.height=window.innerHeight;
    window.addEventListener('resize',this.changeSize);
    this.$once('hook:beforeDestroy',()=>{
      window.removeEventListener('resize',this.changeSize);
    })
  },
  methods:{
    changeSize(){
      this.canvas.width=window.innerWidth;
      this.canvas.height=window.innerHeight;
    }
  },
}
</script>

2. 外部监听生命周期函数

当你使用了第三方组件，这时需要监听第三方组件数据的变化，但是组件又没有提供change事件，那怎么办？

于是想出到在外部监听组件的updated钩子函数。查看了一番资料，发现Vue支持在外部监听组件的生命周期钩子函数。

<template>
    <!--通过@hook:updated监听组件的updated生命钩子函数-->
    <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
    <ChooseArea @hook:updated="listenSelectUpdated" />
</template>
<script>
  import ChooseArea from '../components/ChooseArea'
  export default {
     components: {
        ChooseArea
     },
   methods: {
     listenSelectUpdated() {
       console.log('ChooseArea组件的updated钩子函数被触发')
     }
   }
 }
</script>