VUE3-组合式函数(参见react hook)

利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数 — 把js/ts代码封装成一个方法。

约定和最佳实践

• 命名 : 方法名以use开头,驼峰形式

• 输入参数 — unref()

import { unref } from 'vue'

function useFeature(maybeRef) {
  const value = unref(maybeRef)
}

• 返回值

  • 约定：组合式函数始终返回一个包含多个 ref 的普通的非响应式对象（因为ref可以维持在解构过程中与组合式函数内状态的响应式连接）
  • reactive(组合式函数) – 以对象属性的形式来使用组合式函数中返回的状态

• 副作用：组件挂载后在调用生命周期钩子并及时清理

• 限制：

  • 组合式函数在 <script setup> 或 setup() 钩子中，应始终被同步地调用。在某些场景下，也可以在 onMounted()中使用。

在选项式 API 中使用组合式函数

• 组合式函数必须在setup()中调用，且其返回的绑定必须在setup()中返回
• 示例：

  import { useMouse } from './mouse.js'
  import { useFetch } from './fetch.js'
  
  export default {
    setup() {
      const { x, y } = useMouse()
      const { data, error } = useFetch('...')
      return { x, y, data, error }
    },
    mounted() {
      // setup() 暴露的属性可以在通过 `this` 访问到
      console.log(this.x)
    }
    // ...其他选项
  }

与其他模式比较

• 与 Mixin 的对比

  • Minxin存在短板，vue3不推荐使用，存在只为项目迁移的需求

• 与 无渲染组件 的对比

  • 组合式函数不会产生额外的组件实例开销

• 与 React Hooks 的对比

  • 仅调用 setup() 或 <script setup> 的代码一次。不需要担心闭包变量的问题。组合式 API 也并不限制调用顺序，还可以有条件地进行调用。
  • Vue 的响应性系统运行时会自动收集计算属性和侦听器的依赖，因此无需手动声明依赖。
  • 无需手动缓存回调函数来避免不必要的组件更新。Vue 细粒度的响应性系统能够确保在绝大部分情况下组件仅执行必要的更新。