vue3学习-组合式函数

组合式函数

时一个利用vue的组件合适Api来封装和服用有状态逻辑的函数。

组合式函数只能在 <script setup> 或setup() 钩子中被调用。

它们也只能被同步调用。

如：抽取可复用的日期格式化函数

组合式函数以“use”开头

1. 轻易复用
2. 嵌套多个组合式函数

异步状态示例

在做异步数据请求时

#fetch.js
import { ref } from 'vue'
export function useFetch(url) {
    const data = ref(null)
    const error = ref(null)
    
    fetch(url)
    .then((res) => {res.json()})
    .then((json) => {data.value = json})
    .catch((err) => {error.value = err})
    return {data, error}
}

//使用
import { useFetch } form './fetch.js'
const {data, error } = useFetch('...')

那怎么再次发送请求呢？

我们可以用 watchEffect() 和 toValue() API 来重构我们现有的实现

接受响应式状态

const url = ref('url')
const  {data, error } = useFetch(url)
url.value = 'fff'//将会重新触发fetch
#或者 姐搜一个 getter函数

export function useFetch(url) {
    watchEffect(() => {
        fetch(toValue(url)).then((res) =>res.json )
        .then((json) => data.value = json)
        .catch((err) => {error.value = err})
    })
}

toValue() API

将可能的ref 或 getter 函数 解包

它的设计目的是将 ref 或 getter 规范化为值

如果参数是 ref，它会返回 ref 的值；如果参数是函数，它会调用函数并返回其返回值。

约定和实践

命名

组合式函数约定用驼峰命名法，并以“use”作为开头

输入参数

返回值

组合式函数始终返回一个包含多个 ref 的普通的非响应式对象， 这样该对象在组件中被结构为 ref之后仍可以保持响应性。

从组合式函数返回一个响应式对象会导致在对象解构过程中丢失与组合式函数内状态的响应性连接。

使用限制

组合式函数只能在 `` 或 setup() 钩子中被调用。在这些上下文中，它们也只能被同步调用。在某些情况下，你也可以在像 onMounted() 这样的生命周期钩子中调用它们。

作用

1. 将生命周期钩子注册到该组件实例上
2. 将计算属性和监听器注册到该组件实例上，以便在该组件被卸载时停止监听，避免内存泄漏。

组合式函数和 Mixin 的对比

minxin

1. 不清晰的数据来源：多个mixin时，实例的数据、追溯、理解组件的行为，变得空空
2. 命名空间冲突：可能会注册相同的属性名，照成命名冲突
3. 隐式的跨 mixin 交流：多个minix依赖共享属性名来进行相互作用

组合式函数

1. 组合式函数中使用 ref + 结构模式，让属性的来源在消防组件时一目了然
2. 通过在结构变量 时对变量进行重命名来避免相同的键名。
3. 返回值可以作为另一个组合式函数的参数被传入，向普通函数这样

和无渲染组件的对比