Vue 3 组合函数：简化代码，提高可维护性

当我们使用 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 的设计理念。