hook

简介

hook 本质是一个函数，把setup函数中使用的 Composition API 进行了封装，使得我们可以在setup函数中使用这些函数，而不用在setup函数中导入这些函数，他代替了vue2中mixins的功能，但是比mixins更加灵活，因为他可以在组件中任意位置使用，而不是像mixins一样只能在组件的顶部使用。

定义hook

import { debounce } from '@/utils/index.js'

export default function useResize(callback) {
    let resizeHandler = null

    onMounted(() => {
        initListener()
    })

    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeHandler)
        resizeHandler = null
    })

    function initListener(){
        resizeHandler = debounce(() => {
            resize()
        }, 100)
        window.addEventListener('resize', resizeHandler)
    }

    function resize() {
        callback && callback()
    }
}

使用hook

<script setup>
import useResize from '@/hooks/useResize.js'

function resize() {
    // do something
    console.log('浏览器resize')
}


useResize(() => {
    resize()
})
</script>