Vue2.x生命周期函数hooks

文章目录

• • 参考
  • 知识点
  • 定时器清除案例
  • 外部监听生命周期函数

参考

1. 实战技巧，Vue原来还可以这样写
2. Vue 程序化的事件侦听器

知识点

组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发

定时器清除案例

mounted 和 beforeDestroy 生命周期函数配套使用

export default {
  data: function () {
    return {
      timer: null
    }
  },
  // 创建定时器
  mounted () {
    this.timer = setInterval(() => {
      console.log('time' + new Date().getTime())
    }, 1000)
  },
  // 删除定时器
  beforeDestroy () {
    if (this.timer) {
      console.log('销毁定时器')
      clearInterval(this.timer)
    }
  }
}

mounted中处理所有（hook:beforeDestroy）

export default {
  name: '',
  mounted () {
    // 创建一个定时器
    let timer = setInterval(() => {
      console.log('time' + new Date().getTime())
    }, 1000)
    // 在销毁之前执行的 hook 方法
    this.$once('hook:beforeDestroy', function () {
      clearInterval(timer)
      console.log('第一个 hook' + timer)
    })
    // hook 函数可以执行多次
    this.$once('hook:beforeDestroy', function () {
      console.log('第二个 hook' + timer)
    })
  },
}

外部监听生命周期函数

应用场景说明

1. 使用的第三方组件，对于开发者来说内部就是一个沙盒，不了解内部的逻辑，并且不能修改内部代码
2. 希望监听类似change事件，或者是在组件加载完之后执行某个业务逻辑

案例说明

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