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