优雅的setup（函数式）写法+封装

在 Vue 中，setup 函数是组合式 API 的核心，它提供了一种更灵活和高效的方式来组织和管理组件的逻辑。

首先，让我们来看一个简单的 setup 函数示例：

import {
    ref, computed } from 'vue';

export default {
   
  setup() {
   
    // 定义响应式数据
    const count = ref(0);

    // 定义计算属性
    const doubleCount = computed(() => count.value * 2);

    // 定义方法
    const increment = () => {
   
      count.value++;
    };

    return {
   
      count,
      doubleCount,
      increment,
    };
  },
};

在这个示例中，我们使用 ref 来创建响应式的数据变量 count，使用 computed 来创建基于 count 的计算属性 doubleCount，并定义了一个方法 increment 来增加 count 的值。最后，我们通过返回一个对象，将这些属性和方法暴露给模板使用。

接下来，我们可以对一些常见的逻辑进行封装，以提高代码的复用性和可读性。

比如，我们可以封装一个获取用户信息的逻辑：

import {
    ref } from 'vue';

const useUserInfo = () => {
   
  const user = ref({
    name: 'John Doe', age: 30 });

  return {
    user };
};

export default useUserInfo;

在组件中使用时：

import useUserInfo from './useUserInfo';

export default {
   
  setup() {
   
    const {
    user } = useUserInfo();

    return {
    user };
  },
};

我们还可以封装一个发送网络请求的函数：

import axios from 'axios';

const useFetchData = async (url) => {
   
  const data = ref(null);
  const loading = ref(true);
  const error = ref(null);

  try {
   
    const response = await axios.get(url);
    data.value = response.data;
  } catch (err) {
   
    error.value = err;
  } finally {
   
    loading.value = false;
  }

  return {
    data, loading, error };
};

export default useFetchData;

在组件中使用：

import useFetchData from './useFetchData';

export default {
   
  setup() {
   
    const {
    data, loading, error } = useFetchData('https://example.com/api/data');

    return {
    data, loading, error };
  },
};

通过这样的封装，我们可以将一些常见的逻辑提取出来，形成独立的模块，使组件的代码更加简洁和易于维护。

此外，我们还可以根据具体的需求，进一步封装更多的逻辑，如表单验证、路由处理等。

总的来说，优雅的 setup 写法和封装可以让我们更好地组织和管理组件的逻辑，提高开发效率和代码质量。你可以根据自己的项目需求，不断探索和实践更合适的封装方式。