什么是组合式函数？
定义：
在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数
命名：
用驼峰命名法命名，并以“use”作为开头。例：useLike
案例（下面会用到这个案例进行分析）：
组合式函数的代码（useLike.ts）：
//点赞
import { ref } from 'vue';
export default function (counts: number, likeSta: number) {
// 点赞量
const likeCounts = ref(counts);
//点赞状态
const likeStatus = ref(likeSta);
// 点赞的方法
const like = async (obj: object) => {
//想要实现的逻辑
};
return { likeCounts, like, likeStatus }; //把调用地方需要的变量或者方法暴露出去
}调用的代码：
const { likeCounts, like, likeStatus } = useLike(0, 1);
//解构出来的方法和变量都可以直接使用注：一个组合式函数可以调用一个或多个其他的组合式函数，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。
接收响应式状态：
背景：
useLike（）接收静态数据作为输入，只执行一次就结束了，我们想要实现传入参数改变时就重新调用方法
重要的响应式API：watchEffect 和 toValue
1、watchEffect()
基本概念：watchEffect 是一个响应式副作用的函数，它会在其依赖的响应式数据变化时重新执行。可以用来自动跟踪依赖并响应变化
作用：
- 自动追踪依赖：watchEffect 会自动追踪其内部使用的响应式数据。
- 副作用：用于执行副作用操作，比如更新 DOM、发送请求等。
示例代码：
import { ref, watchEffect } from 'vue';
const count = ref(0);
const doubled = ref(0);
// 使用 watchEffect 追踪 count 的变化
watchEffect(() => {
doubled.value = count.value * 2;
console.log(`Count: ${count.value}, Doubled: ${doubled.value}`);
});
// 改变 count 的值
count.value = 1; // 输出: Count: 1, Doubled: 2
count.value = 2; // 输出: Count: 2, Doubled: 4和watch的区别：
可以参考我另一篇博客：watch和watchEffect的区别-CSDN博客
2、toValue()
基本概念：toValue 是一个工具函数，用于将响应式引用（ref）或计算属性（computed）转换为原始值。它可以简化获取这些值的过程，获取的原始值不再是响应式的，在需要一次性获取响应式数据的场景中非常有用，提供了更大的灵活性。
作用：
- 原始值转换：toValue 可以处理 ref 和 getter，返回相应的原始值。
- 避免手动处理 .value：简化代码，避免显式调用 .value。
示例代码：
import { ref, computed, toValue } from 'vue';
const count = ref(10);
const doubledCount = computed(() => count.value * 2);
// 使用 toValue() 获取原始值
const originalCount = toValue(count); // 获取 count 的原始值
const originalDoubledCount = toValue(doubledCount); // 获取 computed 的原始值
console.log(originalCount); // 输出: 10
console.log(originalDoubledCount); // 输出: 20拓展：
toValue()失去响应式性，那为什么它还属于响应式API？
虽然 toValue() 返回的是普通值，它仍然是响应式系统的一部分，因为它与其他响应式 API 紧密集成，共同构建了 Vue 的响应式机制
二者共同使用的效果：
toValue() 是在 watchEffect 回调函数的内部调用的。这确保了在 toValue() 规范化期间访问的任何响应式依赖项都会被侦听器跟踪
返回值：
形式：
返回一个包含多个 ref 的普通的非响应式对象，这样该对象在组件中被解构为 ref 之后仍可以保持响应性：
return { likeCounts, like, likeStatus }; 调用时：
1、解构调用：
const { likeCounts, like, likeStatus } = useLike(0, 1); // 保留响应性
const { likeCounts } = useLike(0, 1); // 这样会失去响应性
注：解构时，{ likeCounts, like, likeStatus }要跟组合式函数中返回值的对象保持一致。这样能保留对原始响应式对象的引用，确保组件中使用的变量保持响应性
2、对象调用：
希望以对象属性的形式来使用组合式函数中返回的状态，可以将返回的对象用 reactive() 包装一次，这样其中的 ref 会被自动解包
const mouse = reactive(useLike(0, 1))
console.log(mouse.likeCounts)总结：
组合式函数在 Vue 3 中是实现逻辑复用、清晰结构和避免命名冲突的重要工具。它们增强了代码的灵活性、可测试性，适应了 Vue 3 的响应式系统，是现代 Vue 开发中不可或缺的一部分
参考文档：
想了解更多，家人们可以去官方文档中寻找答案哦：组合式函数 | Vue.js (vuejs.org)
原文地址：https://blog.csdn.net/m0_75074819/article/details/142894271
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！