自定义hook函数与toRef

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)。