前端培训丁鹿学堂分享：vue3之hook函数和toRef组合式API使用

vue3自定义hook函数

hook的本质就是函数，把setup中的组合式api进行了一个封装，便于复用。
封装和引用有一定的套路。话不多说，上代码。

需求：封装一个复用功能：点击屏幕计数器加1

1. 封装hooks，创建hooks文件夹，创建useClick.js 这个就是hook函数

import {ref,onMounted,onBeforeUnmount} from 'vue'
export default  function (){
    let count = ref(0)
    function clickAdd(){
        count.value ++
    }
    onMounted(() => {
        window.addEventListener('click',clickAdd)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('click',clickAdd)  
    })
    return count
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 使用的地方引入

import useClick from '../hooks/useClick'
export default {
    setup () {
        let count = useClick()
        return {count}
    }
}
1
2
3
4
5
6
7

注意点：

1. hook函数要通过export 导出，才能在别的组件中使用
2. hook函数要有返回值，在组件中调用以后才能用变量接收，进而去使用。

toRef和toRefs的使用

toRef是vue3提供的组合式api，它的作用是创建一个ref对象，其value值指向的是另一个对象中的某个属性。
我们主要利用它去处理，把响应式的对象解构出来，方便在模板中使用。
toRefs可以批量创建多个ref对象，配合展开运算符特别好用。简化我们在模板中使用对象。
toRef的语法：

const name = toRef(person,'name')
1

toRefs的使用

// 模板    
<div>
        姓名：{{name}}
        年龄：{{age}}
    </div>
// js
import { reactive,toRefs } from 'vue'
export default {
    setup () {
        const data = reactive({
           name:'zhangsan',
           age:18 
        })
        return {
            ...toRefs(data)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18