黑马程序员技术交流社区

标题: 【南京校区】VUE---hookEvent,原来可以这样监听组件生命周期 [打印本页]

---

作者: 大蓝鲸小蟀锅    时间: 2020-6-23 10:03
标题: 【南京校区】VUE---hookEvent,原来可以这样监听组件生命周期


1. 内部监听生命周期函数

最近在研发一个前端数据展示项目,用到了echart,其中有一个功能要求窗口resize 图表重绘，然后写好的代码长这样

[JavaScript] 纯文本查看 复制代码

<template>

  <div class="echarts"></div>

</template>

<script>

export default {

  mounted() {

    this.chart = echarts.init(this.$el)

    // 请求数据，赋值数据 等等一系列操作...

    // 监听窗口发生变化，resize组件

    window.addEventListener('resize', this.$_handleResizeChart)

  },

  updated() {

    // 干了一堆活

  },

  created() {

    // 干了一堆活

  },

  beforeDestroy() {

    // 组件销毁时，销毁监听事件

    window.removeEventListener('resize', this.$_handleResizeChart)

  },

  methods: {

    $_handleResizeChart() {

      this.chart.resize()

    },

    // 其他一堆方法

  }

}

</script>

然而code review时候，感觉这样写有问题, 可读性不高，机缘巧合之下了解了hook，当然此hook非彼hook 并不是vue3.0的功能,也不是react的hooks。
随后修改了一下代码改造为：

[JavaScript] 纯文本查看 复制代码

export default {

  mounted() {

    this.chart = echarts.init(this.$el)

    // 请求数据，赋值数据 等等一系列操作...

    

    // 监听窗口发生变化，resize组件

    window.addEventListener('resize', this.$_handleResizeChart)

    // 通过hook监听组件销毁钩子函数，并取消监听事件

    this.$once('hook:beforeDestroy', () => {

      window.removeEventListener('resize', this.$_handleResizeChart)

    })

  },

  updated() {},

  created() {},

  methods: {

    $_handleResizeChart() {

      // this.chart.resize()

    }

  }

}

原来Vue还可以这样监听生命周期函数。

在Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数，

如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})。

2. 外部监听生命周期函数
既然可以在内部监听自己的生命周期函数,那如果想在外部监听组件的生命周期函数，有没有办法啊？
假设我们用了一个第三方组件，需要监听第三方组件数据的变化，但是组件又没有提供change事件，同事也没办法了，才想出来要去在外部监听组件的updated钩子函数。查看了一番资料，发现Vue支持在外部监听组件的生命周期钩子函数。

[JavaScript] 纯文本查看 复制代码

<template>

  <!--通过@hook:updated监听组件的updated生命钩子函数-->

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

  <custom-select @hook:updated="$_handleSelectUpdated" />

</template>

<script>

import CustomSelect from '../components/custom-select'

export default {

  components: {

    CustomSelect

  },

  methods: {

    $_handleSelectUpdated() {

      console.log('custom-select组件的updated钩子函数被触发')

    }

  }

}

</script>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2