当我们使用 Vue 3 时,组合函数(Composition Functions)是一个非常有用的工具,可以帮助我们简化代码并提高可维护性。本文将介绍如何使用组合函数来处理数据加载逻辑,并通过一个具体的例子来展示其优势和实际应用。
首先,让我们来看一下使用组合函数前后的代码对比。
使用组合函数前的代码
<template>
<el-select style="width:100%;" :size="styleSize" clearable filterable @change="changeData" v-model="selectValue"
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.dataCode"
:label="item.dataCode"
:value="item.dataValue">
</el-option>
</el-select>
</template>
<script>
export default {
name: "nb-select",
props: ['value', "catalog", "size"],
data: function () {
return {
selectValue: "",
loading: false,
options: [],
styleSize: "normal"
}
},
mounted: function () {
console.info("init");
this.loadData();
this.selectValue = this.value;
if (this.size != null && this.size != "") {
this.styleSize = this.size;
}
},
watch: {
value: function (val) {
this.selectValue = val;
}
},
methods: {
async loadData() {
let param = {};
param.dictKey = this.catalog;
let res = await this.$http.form("/dictItem/list", param);
if (res.code === 200) {
this.options = res.data;
}
},
changeData(value) {
console.info(value);
this.$emit('input', value);
}
}
}
</script>
<style scoped>
</style>
使用组合函数后的代码
<template>
<el-select style="width:100%;" clearable filterable v-model="model" >
<el-option
v-for="item in options"
:key="item.dataCode"
:label="item.dataCode"
:value="item.dataValue">
</el-option>
</el-select>
</template>
<script setup>
import {useLoadData} from "@/uses/useLoadData";
const model=defineModel();
const props=defineProps({
dictKey: {
type: String,
default: ""
}
})
let param = {
dictKey: props.dictKey,
};
const {data:options}= useLoadData("/dictItem/list",param);
</script>
<style scoped>
</style>
组合函数代码
import http from "@/utils/request";
import {onMounted, ref} from "vue";
export function useLoadData(url, param) {
const data= ref(null);
onMounted(async () => {
let res = await http.post(`${url}`, param);
if (res.code === 200) {
data.value=res.data;
}
})
return {data}
}
码对比分析
在使用组合函数后,我们可以看到以下优势:
- 代码结构清晰:数据加载逻辑被封装在
useLoadData
组合函数中,使得组件代码更加清晰简洁,只需关注数据的展示与交互。 - 可复用性提高:
useLoadData
组合函数可以在多个组件中重复使用,避免了重复编写相同的数据加载逻辑。 - 提高可维护性:当数据加载逻辑需要修改时,只需修改
useLoadData
组合函数即可,不影响各个组件的实现。 - 符合 Vue 3 的组合式 API 思想:组合函数与其他 Vue 3 组合式 API(如
ref
、reactive
、watch
等)配合使用,使代码更符合 Vue 3 的设计理念。
通过以上对比分析,我们可以清楚地看到使用组合函数在代码组织上的优势。它不仅使代码更加模块化、可复用,还能提高代码的可维护性,是 Vue 3 中强大的功能之一。
在实际开发中,我们可以根据需要编写不同的组合函数来处理各种逻辑,比如数据加载、状态管理、表单验证等,从而使代码更加简洁、灵活和易于维护。