本帖最后由 大蓝鲸小蟀锅 于 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>
| 
收藏
淘帖
踩
