当前位置: 首页 > news >正文

vue3.x系列之封装响应式的hooks技巧

v3.x封装一个接口请求的hooks的,都应该很熟练了,那么要实现一个响应式的hooks该怎么做?

实现效果

请添加图片描述

代码实现

<template><div v-if="error">Oops! Error encountered: {{ error.message }}</div><div v-else-if="data">Data loaded:<pre>{{ data }}</pre></div><div v-else>Loading...</div><button @click="url = 'https://jsonplaceholder.typicode.com/todos/2'">发送</button>
</template><script setup>
import { useFetch } from "@/hooks/useFetch";
import { ref } from "vue";
let url = ref("https://jsonplaceholder.typicode.com/todos/1");
const { data, error } = useFetch(url);
</script>
import { delay } from "lodash-es";
import { ref, watchEffect, toValue } from "vue";export function useFetch(url) {const data = ref(null);const error = ref(null);function fetchData() {fetch(toValue(url)).then((res) => res.json()).then((res) => {delay(() => {data.value = res;}, 2000);}).catch((err) => (error.value = err));}watchEffect(() => {fetchData();});return { data, error };
}

技巧总结

  • 这里我们传入的是一个url接口的ref,不是普通的字符串数据
  • hooks里面接收的时候,接口请求使用toValue转为普通的字符数据
  • watchEffect监听副作用,当ref数据变化时,及时响应来发起新的请求
  • delay方法模拟接口请求延时效果,区分出请求中的状态

v3.x的几个工具方法isRef,unref,toRef的对比

// isRef  判断是否是ref类型
let url = ref("https://jsonplaceholder.typicode.com/todos/1");
const str = "hello world";
console.log(isRef(url), "isRef");
console.log(isRef(str), "isRef");

在这里插入图片描述

// unref 解包ref
const unRefUrl = unref(url);
console.log("unRefUrl", unRefUrl);
console.log(unref(str), "unRefStr");

在这里插入图片描述

// toRef 包装ref,可以将值、refs 或 getters 规范化为 refs (3.3+)。
const toRefUrl = toRef(url);
console.log("toRefUrl", toRefUrl);
console.log(toRef(str), "toRefStr");

在这里插入图片描述

const state = reactive({foo: 1,bar: 2
});
const foo = toRef(state, "foo");const foo1 = ref(state.foo);

上面这个 ref 不会和 state.foo 保持同步,因为这个 ref() 接收到的是一个纯数值。
在这里插入图片描述

  • toRef和ref的区别如下图
    请添加图片描述

http://www.mrgr.cn/news/46380.html

相关文章:

  • Node.js - Express框架
  • springboot 集成javaFx 两个面板之间如何进行跳转
  • 【Rust】结构体定义域实例化
  • 港科夜闻 | 香港科大与微软亚洲研究院签署战略合作备忘录,推动医学健康教育及科研协作...
  • Vue实现滚动条三角样式和自定义样式
  • mysql 变量,流程控制与游标
  • C++初阶---C++入门(下)
  • java中日期时间类的api
  • 使用Provide和Inject设计Vue3插件
  • 嵌入式C语言自我修养:ARM体系结构与汇编语言
  • paimon,基础查询语句测试
  • 【Oracle APEX开发小技巧9】通过页面设置文本大写避免upper()函数转换占用额外资源
  • Hugging face简要介绍
  • 【Java】集合中单列集合详解(一):Collection与List
  • 算法 动态规划
  • C#中Json序列化的进阶用法
  • [投稿优惠|稳定检索]2024年电子器件与机械工程、材料国际会议(EDMEM 2024)
  • 系统架构师备考记忆不太清楚的点-信息系统-需求分析
  • 10.9今日错题解析(软考)
  • 低代码开发平台应该归属哪个部门管理?
  • 2003 -Can‘t connect to MySQL server on‘192.168.‘(10060 “Unknown error“
  • Maven 三种项目打包方式:POM、JAR 和 WAR 的区别详解
  • 基于开元鸿蒙(OpenHarmony)的【智能药房与药品管理综合应用系统】
  • 微服务实战——登录(普通登录、社交登录、SSO单点登录)
  • 新硬盘第一次使用需要怎样做?
  • JDK17安装教程