什么是组合式函数?

时间: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)