Vue3 中的hook函数和 toRef(toRefs)

发布时间 2023-11-06 12:51:05作者: 我就尝一口

一、自定义hook函数

   1、什么是hook? 

         本质是一个函数,把 setup 函数中使用的 Composition API 进行了封装

   2、类似于 vue2.x 中的mixin

   3、自定义 hook 的优势:复用代码,让 setup 中的逻辑更清楚易懂。

二、toRef

   1、作用:创建一个 ref 对象,其 value 值指向另一个对象中的某个属性值

   2、语法: 

const name = toRef(person, 'name')
const salary = toRef(person.job.j1, 'salary')
const p = toRefs(person)

return {
  name,
  salary,
  ...p
}

   3、应用:要将响应式对象中的某个属性单独提供给外部使用时

   4、扩展:toRefs 与 toRef 功能一致,但可以批量创建多个ref对象,语法:toRefs(person)