什么是组合式函数？

时间：2024-10-15 07:22:56

定义：

在 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的区别-****博客

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)

相关文章