欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue2.x生命周期函数hooks

程序员文章站 2024-03-05 12:07:42
...

参考

  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>