A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 大蓝鲸小蟀锅 于 2020-6-23 10:07 编辑

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>




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马