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 = nullerror.value = nulltry {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>