Vue 3 之 Composition API

前言

随着Vue 3的发布，Vue框架引入了一个新的和强大的特性集合，被称为Composition API。这一新API不仅仅是对Vue的补充，而是一种全新的组件和逻辑复用方式，它让Vue的代码组织变得更加灵活和模块化。本文将深入探讨Vue 3的Composition API，包括其基本概念、如何使用它来构建组件，以及它如何改善代码组织和重用。

1. 为什么需要Composition API？

在Vue 2中，我们主要通过选项式API（Options API）来定义组件，如data, methods, computed, watch, props, lifecycle hooks等。这些选项很直观，对新手友好，但在处理大型组件或多个组件共享逻辑时，代码往往会变得复杂和冗长。这是因为相关的逻辑分散在一个组件的多个选项部分，难以追踪和维护。

Composition API应运而生，它提供了一种更灵活的方式来组织和复用逻辑。通过Composition API，你可以更容易地将组件逻辑按功能组织起来，而不是按选项类型。

2. Composition API的核心

Composition API主要围绕setup函数展开，这是一个新的组件选项，作为组件内部所有响应式特性、生命周期钩子和其他逻辑的入口。setup函数在组件创建之前执行，这意味着它不会有访问到this的能力。

基本用法：

javascript 复制代码

import { ref, reactive, computed, watch } from 'vue';

export default {
  setup(props, context) {
    // 响应式状态
    const count = ref(0);
    const state = reactive({ title: 'Hello Vue 3' });

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

    // 方法
    function increment() {
      count.value++;
    }

    // 生命周期钩子
    onMounted(() => {
      console.log('Component is mounted!');
    });

    // 返回所有要在模板中使用的响应式引用和函数
    return { count, state, doubledCount, increment };
  }
};

3. 优势和用例

逻辑复用与组织 ：通过setup函数，可以将相关逻辑集中在一起，不再分散于不同的Vue选项。这使得维护和理解组件变得更加容易。
代码复用：可以创建可复用的逻辑函数（通常称为"composables"），这些函数可以在多个组件间共享。
类型支持：Composition API非常适合使用TypeScript，因为它从根本上是函数式的，易于集成类型系统。

4. 实际应用

假设你正在构建一个用户界面，需要在多个组件中使用用户数据和相关操作。你可以创建一个useUser的composable，将所有相关逻辑封装起来。

javascript 复制代码

// useUser.js
import { reactive, toRefs } from 'vue';

export function useUser() {
  const state = reactive({
    user: null,
    isLoading: false,
    error: null
  });

  function loadUser(userId) {
    state.isLoading = true;
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        state.user = data;
      })
      .catch(e => {
        state.error = e;
      })
      .finally(() => {
        state.isLoading = false;
      });
  }

  return {
    ...toRefs(state),
    loadUser
  };
}

Composition API 与 ES6+

1. 模块导入导出

使用 ES6 的模块系统，可以将 Vue 的组合式函数（composables）组织在不同的文件中，并在需要时导入它们。这种模块化的方式有助于保持代码的清洁和管理，特别是在大型应用中。

javascript 复制代码

// composables/useUser.js
import { reactive, toRefs } from 'vue';

export function useUser() {
  const state = reactive({
    user: null,
    isLoading: false,
    error: null
  });

  // 加载用户逻辑
  function loadUser(userId) {
    // ...
  }

  return { ...toRefs(state), loadUser };
}

// 在组件中使用 useUser
import { useUser } from './composables/useUser';

export default {
  setup() {
    const { user, loadUser } = useUser();
    loadUser('123');

    return { user };
  }
};

2. 箭头函数

ES6 箭头函数提供了一种更简洁的函数书写方式，这在写 setup 函数或其他 Vue 的钩子和方法时尤为方便。

javascript 复制代码

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++; };

    return { count, increment };
  }
};

3. 解构赋值

解构赋值使得从 props、context 或响应式引用中提取值变得简单明了。

javascript 复制代码

export default {
  setup(props, { emit }) {
    // 从 props 解构
    const { title } = toRefs(props);

    // 使用 emit 发送事件
    const sendEvent = () => {
      emit('my-event', someData);
    };

    return { title, sendEvent };
  }
};

4. 模板字符串

在需要动态生成字符串的情况下，模板字符串是一个非常有用的特性，特别是在需要将计算值插入字符串中时。

javascript 复制代码

import { ref } from 'vue';

export default {
  setup() {
    const name = ref('Vue');

    // 使用模板字符串动态创建消息
    const message = computed(() => `Hello, ${name.value}!`);

    return { message };
  }
};

5. Async/Await

在 Vue 3 中，Composition API 与 async/await 结合使用，能够更简洁地处理异步逻辑。

javascript 复制代码

import { ref } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const loadData = async () => {
      try {
        const response = await fetch('url-to-fetch');
        data.value = await response.json();
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    };

    return { data, loadData };
  }
};