自定义hook函数与toRef

小巨要做一个很棒的人2023-12-03 22:58

hook

什么是hook?
- 本质是一个函数，把setup函数中使用的Composition API进行了封装。
类似于 vue2 中的mixin。
自定义hook的优势：复用代码，让setup中的逻辑更清除易懂。

怎么用？

hooks文件夹里面的usepoint.js（相当于封装了一套，后续直接一套带走）

import {onMounted, reactive,onBeforeUnmount} from 'vue'
export default function(){
    let point = reactive({
        x:0,
        y:0
      }) 
      function savPoint(e){
        point.x = e.pageX,
          point.y = e.pageY
          console.log(point.x,point.y)
      }
      onMounted(()=>{
        window.addEventListener('click',savPoint)
  
      })
      onBeforeUnmount(()=>{
        window.removeEventListener('click',savPoint)
      })
      return point
}

要用的地方

引入：

import usePoint from './hooks/usePoint'

在setup里：

let point = usePoint()

要记得return 出去哦！！！

toRef、toRefs

作用：创建一个ref对象，其value值指向另一个对象中的某个属性值。
语法：const name = toRef(person,'name')。
应用：要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs 与 toRef 功能一致，但可以批量创建多个ref对象，语法：toRefs(person)。