（二）深入 Vue3 Composition API：提升代码复用性与维护性的最佳实践

本文链接：https://blog.csdn.net/mmc123125/article/details/144989548

（二）深入 Vue3 Composition API：提升代码复用性与维护性的最佳实践

在这里插入图片描述

在 Vue3 的众多新特性中，Composition API 可以说是最重要的一项升级。它不仅为开发者提供了更灵活的代码组织方式，还大大增强了组件之间的复用性和代码的可维护性。在本篇文章中，我们将深入剖析 Composition API 的核心概念，通过对比 Vue2 的 Options API，帮助你轻松实现代码的迁移与优化。

1. 什么是 Composition API？为什么选择它？

Vue2 中，我们习惯使用 Options API（如 data、methods、computed 等）来组织组件逻辑。这种方式简单直观，但当组件变得复杂时，不同功能的逻辑往往分散在多个选项中，导致代码难以管理。

Composition API 则通过一个核心概念——setup 函数，将相关逻辑集中在一起：

逻辑更加清晰，便于阅读和调试。
逻辑的复用性更强，通过自定义 hooks 轻松共享功能。

2. Composition API 的基础用法

我们从一个简单的例子开始，看一下从 Vue2 到 Vue3 的代码对比。

Vue2 的写法：

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

Vue3 的写法：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 响应式变量
    const increment = () => {
      count.value++;
    };

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

关键点：

响应式变量： Vue3 中用 ref 和 reactive 替代了 Vue2 的 data。
函数集中： setup 中所有逻辑集中在一起，更容易理解。

3. 从 Vue2 到 Vue3 的迁移实战：表单处理

假设我们有一个简单的登录表单，包含用户名和密码的验证逻辑。

Vue2 的写法：

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      if (!this.form.username || !this.form.password) {
        alert('请填写完整信息');
        return;
      }
      console.log('表单提交：', this.form);
    },
  },
};

Vue3 的写法：

import { reactive } from 'vue';

export default {
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });

    const handleSubmit = () => {
      if (!form.username || !form.password) {
        alert('请填写完整信息');
        return;
      }
      console.log('表单提交：', form);
    };

    return {
      form,
      handleSubmit,
    };
  },
};

对比分析：

Vue3 使用 reactive 创建响应式对象，而不是 Vue2 的 data。
所有逻辑在 setup 中显式声明，减少了 Vue2 中隐式绑定的问题。

4. 提升复用性的最佳实践：自定义 Hooks

在复杂应用中，某些逻辑（例如表单校验、权限管理）可能需要在多个组件中复用。Composition API 提供了一种更优雅的解决方案——自定义 Hooks。

Vue2 中的复用：

通常通过混入（Mixin）实现逻辑复用，但混入存在以下缺点：

命名冲突：不同组件中的变量可能覆盖彼此。
隐式逻辑：不容易直观理解混入的逻辑来源。

Vue3 中的复用：

通过自定义 Hooks 解决这些问题：

自定义 Hook 示例：

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  const decrement = () => count.value--;

  return {
    count,
    increment,
    decrement,
  };
}

在组件中使用：

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter();

    return {
      count,
      increment,
      decrement,
    };
  },
};

5. 解决 Vue2 项目迁移中的常见问题

在实际项目中，迁移到 Vue3 可能遇到一些问题，例如：

生命周期变化：
Vue3 使用 onMounted、onUpdated 等取代 Vue2 的 mounted、updated 等选项，需手动替换。
组件实例访问：
Vue2 中通过 this 访问组件实例，而 Vue3 的 setup 中没有 this，需要使用 getCurrentInstance()。

代码示例：生命周期迁移

// Vue2
export default {
  mounted() {
    console.log('组件已挂载');
  },
};

// Vue3
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
  },
};