Vue 组合式函数

Vue

适用范围:

1. 作用:

1. 将纯逻辑维护的状态(响应式变量)封装起来(没有视图关系)
   1. 便于在不同组件中复用这个状态

2. 场景:

3. 在组合式api中调用组合式函数
4. 性能开销比无渲染组件低

梗概:

就是一个与状态相关的特殊的函数:

1. 函数体中使用组合式api
2. 返回一些这个函数所维护的状态(响应式的变量)
3. 和react的hook是一样的

在函数体中维护状态:

1. 一般依靠注册侦听器来实时更新状态
2. 侦听器可以是:
   1. watch方法或Vue watchEffect() 自动监听响应式引用
   2. Dom原生的事件监听器

注意:

1. 在组合式api中, 不要异步调用组合式函数

实例:

1. 不需要输入其他状态的组合式函数:

1.1. 封装为组合式函数:

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'
/* 按照惯例，组合式函数名以“use”开头*/
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)
  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  // 通过返回值暴露所管理的状态
  return { x, y }
}

1.2. 在组合式api中调用组合式函数:

<script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>

2. 输入其他状态的组合式函数:

// fetch.js
import { ref, isRef, unref, watchEffect } from 'vue'
 
export function useFetch(url) {//传入的url是响应式的
  const data = ref(null)
  const error = ref(null)
 
  function doFetch() {
    // 在请求之前重设状态...
    data.value = null
    error.value = null
    // unref() 解包可能为 ref 的值
    fetch(unref(url))
      .then((res) => res.json())
      .then((json) => (data.value = json))
      .catch((err) => (error.value = err))
  }
 
  if (isRef(url)) {
    // 若输入的 URL 是一个 ref，那么启动一个响应式的请求
    watchEffect(doFetch)
  } else {
    // 否则只请求一次
    // 避免监听器的额外开销
    doFetch()
  }
 
  return { data, error }
}