vue3笔记（13）自定义Hooks

年前赶项目真累啊～
这篇记录Hooks相关的定义、用法。

基础知识

1. Hooks 在JS里是 callback，事件驱动，集成定义一些可复用的方法；
2. 可以随时被引入和调用以实现高内聚低耦合的目标；
3. 自定义 Hooks，将代码通过功能分块写、响应变量和方法在一起定义和调用；每个Hooks显式暴露响应式变量和方法；
4. 将可复用功能抽离为外部JS文件；
5. 自定义 Hooks 可以灵活传递任何参数来改变它的逻辑，参数不限于其他hook的暴露出来的变量，这提高了Vue3在抽象逻辑方面的灵活性；
6. 利用ES6对象解构很轻松给变量重命名；
7. 自定义 Hooks 是属于组件下的函数作用域的；
8. utils 的工具函数脱离框架也能使用，hooks 和框架耦合配合业务定义；

demo

import { ref, watch } from 'vue';
const useAdd = ({ num1, num2 })  =>{
    const addNum = ref(0)
    watch([num1, num2], ([num1, num2]) => {
      addFn(num1, num2)
    })
    const addFn = (num1, num2) => {
      addNum.value = num1 + num2
    }
    return {
      addNum,
      addFn
    }
}
export default useAdd

使用hook

import useAdd from './useAdd.js'     //引入hook
const num1 = ref(2)
const num2 = ref(1)

const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)