Vue3 中的组合式函数(Composables)

得益于"组合式函数",在 Vue3中,组件之间的状态共享比以往任何时候都更加容易。这种新范式引入了一种更有条理、更可扩展的方式来管理整个应用程序的状态和逻辑。

了解 组合式函数(Composables)

本质上,组合式函数是一种模式,而不是特定的功能。它通过一个可以保存状态和可重用代码的简单函数来实现。

在 Vue 应用的概念中,"组合式函数"(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时,我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间,我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑:它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多,比如你可能已经用过的 [lodash] 或是 [date-fns]

相比之下,状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中,也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

看一下useCounter组合式函数的例子:

javascript 复制代码
import { ref } from 'vue';  
  
export function useCounter(initialValue = 0) {  
  
    const counter = ref(initialValue);  
  
    function increment() {  
        counter.value++;  
    }  
  
    function decrement() {  
        counter.value--;  
    }  
  
    function reset() {  
        counter.value = initialValue;  
    }  
  
    return { counter, increment, decrement, reset };  
}

我们将声明counter为反应状态,并声明三个操作它的函数。需要注意的是,组合式函数必须返回其他组件可以访问的所有内容。

从组件方面,我们可以像这样导入并初始化组合式函数:

xml 复制代码
<template>  
    <div>  
        <h3>Counter Value: {{ counter }}</h3>  
        <button @click="increment">Increment</button>  
        <button @click="decrement">Decrement</button>  
        <button @click="reset">Reset</button>  
    </div>  
</template>  
  
<script setup>  
    import { useCounter } from './useCounter';  
    const { counter, increment, decrement, reset } = useCounter();  
</script>

这个例子展示了组合式函数如何帮助代码组织,因为我们的组件非常轻量级并且易于理解。

每次启动此组合式函数时,都会创建一个新的计数器变量, 以保持实例之间的状态分离。

但是,在某些情况下,实例之间需要共享状态。这可以通过在可组合函数外部声明状态来实现:

csharp 复制代码
import { ref } from 'vue';  

const sharedState = ref();  

export function useComposable() {  
    const localState = ref();  
    return {  
        sharedState,  
        localState  
    };  
}

这种方法显示了组合式函数的灵活性,可以以针对每个实例单独或在它们之间共享的方式管理状态。

结论

总而言之,组合式函数组件通过提供简单性和自然且易于理解的模块化真正重新定义了 Vue 3。它们可用于抽象组件的复杂性,并在组件之间共享状态。

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode9 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis