vue3：23—自定义hooks

正是因为有了hooks，组合式才发挥出了威力

其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

如何定义hooks 

1. 具备可复用功能，才需要抽离为 hooks 独立文件
2. 函数名/文件名以 use 开头，形如: useXX
3. 引用时将响应式变量或者方法显式解构暴露出来；

图片示例

代码示例：

person.vue

useDog.ts

import {onMounted, ref} from 'vue'

export default function(){
    const dogList = ref([

    ])
    function getDogList(){
        dogList.value.push()
    }
    onMounted(()=>{
        getDogList()
    })
    //向外部提供东西
    return {
        dogList,
        getDogList
    }
}

useSum.ts

import {ref} from 'vue'
export default function(){
    const sum = ref(0)
    function add(){
        sum.value+=1
    }
    return {
        sum,
        add
    }
}