Vue3自定义钩子

Guitar大约 1 分钟

自定义钩子函数

Vue2 中使用的时配置项来完成组件的配置。Vue3 中虽然也可以使用配置项，但更多的是使用组合式API来完成。

组合式，即通过在 setup 中执行一些函数或声明变量，来实现组件的配置。

类似于 Vue2 的mixin，Vue3 中的组合式API允许执行一个用户自定义的函数，来获取组件的配置，这个自定义的函数，即为自定义钩子函数（hook）。

一般一个钩子hook对应一组 data、method等等，围绕着某个功能。通常将钩子放在单独的 hooks/ 下的一个 js 文件中。

// hoooks/sum.js
import {reactive} from 'vue'

export default function(){
    // 把所有有关的资源都在这个函数中创建并返回（类getter，实现复用时的隔离）
    
    // data
    let data = reactive({
        num1 : 0,
        num2 : 0,
        result : 0
    })
    // methods
    function sum(){
        data.result = data.num1 + data.num2
    }
    
    // 返回一个对象
    return {data, sum} // 返回值就是最终需要在setup中返回的
}

使用hook：

// 导入钩子函数
import sum from './hooks/sum.js'
export default {
    name : 'App',
    setup(){
        // 调用钩子函数
        let result = sum()
        // 返回一个对象
        return result
        // return {...result, ...} // ES6 对象的组合
    }
}

组合式API和选项式API

组合式API：Composition API。集中。关注点在一个个功能上。使用一个个自定义钩子，即可实现关注功能的代码复用。

选项式API：Options API。分散。关注点在一个个**选项（配置项）**上，一个完整功能的实现散落至各个配置项，不方便维护。