很多人都知道,vue3中加入了hook的概念,让我们代码看的更为整齐,但是不少人却不知道,其实vue2中已经有了'hook'的概念。下面就给大家说说vue2中怎么使用hook
先上一段代码,大多数人在开发过程中都是这么写的,这么写不能说不好吧,但是代码过分分散,很是杂乱,中间可能相差几百行,可读性相当差
<script> export default { mounted() { xxxx.start() }, updated() { xxxx.update() }, created() { // 执行一大堆的其他操作 xxxx.init() // 执行一大堆的其他操作 }, beforeDestroy() { // 执行一大堆的其他操作 xxxx.destroy() // 执行一大堆的其他操作 }, methods: { a () { console.log(111) } // 其他一堆方法 } } </script>
下面,本次重点来了:集合!
我们可以借助hook对代码整合,如下:
<script> export default { created() { xxxx.init() this.$once('hook:mounted', () => { xxxx.start() }) this.$on('hook:mounted', () => { xxxx.start() }) this.$on('hook:updated', () => { xxxx.update() }) this.$once('hook:beforeDestroy', () => { xxxx.destroy() }) } } </script>
这么看可读性一下子就好了,代码也更加集中,别人在改的时候也不至于一下子翻到下半屏,一下上半屏
在Vue组件中,可以用过$on,$once去监听所有的生命周期钩子函数,如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})
再来说第二种场景吧,假如你用了第三方的 组件,想在第三方组件数据变化时进行一些操作,而这个组件正好没有提供change方法
这时候应该怎么办?当然最好是可以深入组件去修改。但是假如第三方组件又是打包过后的代码呢?痛苦的去看么?
不,我来教你一个新的神器
外部监听生命周期函数
<template> <!--通过@hook:updated监听组件的updated生命钩子函数--> <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发--> <xxx-comp @hook:updated="handleUpdateChange" /> </template> <script> import XxxComp from '../components/xxx-comp' export default { components: { XxxComp }, methods: { handleUpdateChange () { console.log('组件的updated钩子函数被触发') } } } </script>
好了,本次分享结束。get到了么?拿去装逼吧