前导

Vue3以Composition API取代vue2中提供的复用逻辑模式mixin，并当作新版本最重要的功能之一推出。其作为mixin的完美替代者做出了哪些改变?随文章一起对比分析。

解决了vue2 mixin存在的问题

1. mixin的冲突

当一个组件使用mixin时，mixin的所有属性不论组件需要与否都会合并到组件中。并且会随着开发的复杂趋势让属性名称的冲突变得越来越难处理。

2. 难以追踪定位来源

因为mixin与引用它的组件之间并不存在父子层级的引用关系，因此组件中可以使用mixin的定义的数据属性，这在开发过程中的某种情况下可能是一种优点，比如可以省略定义逻辑内的数据属性。但在不熟悉流程的开发人员面前，可能难以调试代码并识别冲突的模块。

3. 有限的复用性

博主的上文提到了，mixin更像是在组件与混入的逻辑中取并集，无法做到低成本的改变核心的业务逻辑代码，这令其逻辑并不适合复用。

Composition API 的优势

Vue3 引入了 Composition API 来解决 Vue2 Mixins的碎片行为所导致的问题 并提供排列与相同逻辑问题相关的代码块的功能。

1. 更灵活、更容易维护测试

Composition API 允许我们在一个函数内部定义多个状态、计算属性、方法等。这样就能够把相关联的逻辑聚合在一起，避免了传统 Options API 中需要在不同生命周期钩子之间跳转导致代码难以理解和维护的问题。同时也降低了组件本身与之前mixin之间耦合性，使得测试变得简洁明确。

2. 更好的可读性

通过使用 Composition API ，我们能够将相似功能的代码放在同一个函数内部，在视觉上形成了一种模块化、清晰简洁且易于阅读和理解的结构。我们可以根据需要将相关逻辑组合在一起，并使用解构赋值来获取所需的数据和方法。

3. 更强大的面向对象编程

Composition API 的设计使得我们可以更好地利用面向对象编程的思想。通过使用 ref、computed 等函数，我们能够创建可响应式的数据，并且可以像操作普通 JavaScript 对象一样对其进行修改和访问。

4. 更好的代码复用性

由于 Composition API 提供了更灵活的组织代码结构方式，因此可以更方便地复用逻辑。我们可以将某个功能封装成一个独立的自定义 Hook ，然后在多个组件中引入并使用该 Hook ，从而实现代码复用。

5. 更好的性能

Composition API 采用了优化过的响应式系统，提供了更高效且细粒度的依赖追踪机制，从而减少不必要的重新渲染.

如何封装一个Hook？

以上的第四条提到了更好的代码复用性，对于Hook来说，简单的示例往往只包含两个元素：

1. hook本身
2. 引用hook的组件

- useFetchData.js

它是一段自定义 Hook ，它负责发起网络请求并返回获取到的数据

示例代码：

// useFetchData.js
import { ref } from 'vue';

export function useFetchData(url) {
  //返回数据
  const data = ref(null);
  //标识符
  const isLoading = ref(false);
  //核心hook方法
  async function fetchData() {
    try {
      isLoading.value = true;
      const response = await fetch(url);
      data.value = await response.json();
    } catch (error) {
      console.error(error);
    } finally {
      isLoading.value = false;
    }
  }

  return { data, isLoading, fetchData };
}

- demo.vue

这个组件引用了自定义 Hook：useFetchData.js 。 并通过解构赋值方式将返回的数据和方法暴露给组件。

示例代码：

// demo.vue
import { onMounted } from 'vue';
import { useFetchData } from './useFetchData';

export default {
  setup() {
    //访问url
    const url = 'https://api.example.com/data';
    //传入url、从hook中获取data、isLoading、fetchData
    const { data, isLoading, fetchData } = useFetchData(url);
    //生命周期中调用
    onMounted(() => {
      fetchData();
    });
    return { data, isLoading };
  },
};

除此之外，我们仍可以创建更多的hook，比如从local中加载数据的hook：

• useLocalStorage.js

示例代码：

import { ref } from 'vue';

export function useLocalStorage(key, initialValue) {
  const value = ref(initialValue);

  // 在组件初始化时从 localStorage 加载数据
  if (localStorage.getItem(key)) {
    value.value = JSON.parse(localStorage.getItem(key));
  }

   // 监听 value 值变化并将其保存到 localStorage 中
   watch(value, () => {
     localStorage.setItem(key, JSON.stringify(value.value));
   });

   return value;
}

...

总结

总体而言，Composition API在代码组织、重用性、可测试性以及类型推断等方面都有显著提升。 它为开发者提供了更灵活且强大的工具来构建复杂应用程序，并使得代码结构更加清晰和可维护。