vue3组合式函数

vue3的组合式函数的作用是封装和复用响应式状态的函数。只能在setup 标签的script标签汇总或者setup函数中使用。

普通的函数只能调用一次，但是组合式函数接受到响应式参数，当该值发生变化时，也会触发相关函数的重新加载。

如下
定义了一个，获取用户详情的组合式函数，封装到单独的js中，

import { ref, toValue, watchEffect } from 'vue'

 export function getUserInfo(url) {
    const data = ref(null)
    const error = ref(null)


    watchEffect(async () => {
        data.value = null
        error.value = null
        try {
            const res = await fetch(toValue(url))
            data.value = await res.json()
        } catch (e) { 
            error.value = e
        }
    })
    return {data,error}
}

在这里插入图片描述

函数返回2个响应式参数，data和error。
然后再Demo组件中引入该脚本，并将data和error渲染到页面上，
当url发生变化时，函数又重新被调用了。

<script setup lang="ts">
    import { ref ,computed} from 'vue'
import {getUserInfo} from '../pulic/fetch.user.js'
    
    //const url=ref("http://localhost:3000/user/info/query?id=1")

    const baseUrl = 'http://localhost:3000/user/info/query?id='
    const id = ref(1)
    const url = computed(() => baseUrl + id.value)

    const {data,error} = getUserInfo(url)
</script>

<template>
  <div>
    Load post id:
  <button v-for="i in 5" @click="id = i" :key="i">{{ i }}</button>
    <h1>{{ data }}</h1>
    <h1>{{ error }}</h1>
  </div>

</template>