Vue 3 Composition API

class Composition,vue3

Vue 3 引入了 Composition API，它是为了提升代码的可读性、可重用性和组织方式而引入的全新 API。与 Vue 2 中的 Options API 相比，Composition API 允许我们更灵活地组织逻辑，并将相关的代码片段分离为可重用的功能。本文将详细说明 Composition API 的原理、使用方式，并通过示例来展示其强大功能。

一、Composition API 的核心概念

Composition API 的核心是通过函数组合实现更灵活的逻辑复用，以下是关键的 API 和概念：

  1. setup 函数：每个 Vue 组件都会有一个 setup 函数作为组件入口，取代了传统的 data、methods、computed 等选项。setup 函数在组件实例创建前调用，是 Composition API 的主要切入点。

  2. 响应式 API：

    • reactive：将对象转换为响应式数据。
    • ref：用于定义基本类型的响应式数据（如字符串、数字、布尔值等）。
    • computed：定义计算属性，类似 Vue 2 中的 computed。

  3. 生命周期钩子：在 Composition API 中，生命周期钩子是以 onX 形式的函数存在，例如 onMounted，与 Options API 中的 mounted 等钩子相对应。

二、Composition API 使用示例

1. setup 函数和响应式数据

Composition API 的核心是 setup 函数，它会在组件初始化时执行，用于定义数据、方法、计算属性和生命周期钩子。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    // 返回需要暴露给模板的属性和方法
    return {
      count,
      increment
    };
  }
};
</script>

2. reactive 和 ref

在 Composition API 中，使用 ref 或 reactive 来创建响应式数据。它们的区别在于：

  • ref：用于基本类型数据（如数字、字符串、布尔值等）。
  • reactive：用于对象或数组。
<template>
  <div>
    <p>{{ state.name }}</p>
    <p>{{ state.age }}</p>
    <button @click="updateInfo">Update Info</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    // 使用 reactive 创建响应式对象
    const state = reactive({
      name: 'John Doe',
      age: 25
    });

    const updateInfo = () => {
      state.name = 'Jane Doe';
      state.age++;
    };

    return {
      state,
      updateInfo
    };
  }
};
</script>

3. computed 计算属性

computed 用于声明计算属性，类似于 Vue 2 中的计算属性。

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 使用 computed 定义计算属性
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return {
      firstName,
      lastName,
      fullName
    };
  }
};
</script>

4. 生命周期钩子

在 Composition API 中，生命周期钩子通过 onXXX 函数的方式使用，例如 onMounted 和 onUnmounted。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Loading...');

    onMounted(() => {
      console.log('Component Mounted');
      message.value = 'Component is mounted!';
    });

    onUnmounted(() => {
      console.log('Component Unmounted');
    });

    return {
      message
    };
  }
};
</script>

5. 自定义组合函数（Composable Functions）

组合函数是 Composition API 中的亮点之一。通过将功能封装在组合函数中，多个组件可以共享相同的逻辑。这种模式极大提升了代码的可重用性和组织性。

// useCounter.js - 自定义组合函数
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  return {
    count,
    increment
  };
}

然后在多个组件中使用该函数：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

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

    return {
      count,
      increment
    };
  }
};
</script>

三、Composition API 的原理

Vue 3 的 Composition API 基于 JavaScript 的闭包和响应式系统构建。它的实现原理主要有以下几点：

  1. 响应式数据的追踪：reactive 和 ref 是基于 Vue 3 全新的响应式系统 Proxy 来追踪和更新数据的。每当我们通过 ref.value 或 reactive 修改数据时，Vue 的内部会自动追踪依赖并更新视图。
  2. 函数式的逻辑拆分：setup 函数允许我们通过逻辑拆分、模块化的方式来组织代码，使相关逻辑更加集中，便于代码维护和重用。
  3. 生命周期钩子绑定：Vue 在组件初始化和销毁的过程中会调用 onXXX 的钩子函数，类似于 Vue 2 中的选项 API 生命周期钩子。
  4. 更小的打包体积：Vue 3 在设计时充分考虑了 tree-shaking，通过 Composition API 可以在打包时剔除未使用的代码，减少应用的体积。

四、Composition API 的优势

  1. 代码复用性：通过自定义组合函数，逻辑可以非常灵活地在多个组件间复用，而不再依赖 mixins 或者大量的传参。
  2. 逻辑解耦：在 setup 中可以清晰地组织相关逻辑，而不会像 Options API 那样将 data、methods、computed 等分散在不同的配置项中。
  3. 类型支持：Composition API 对 TypeScript 的支持非常好，使用 TypeScript 时可以更轻松地进行类型推断和检查。

总结

Vue 3 的 Composition API 为开发者提供了更灵活、功能强大的工具来构建应用。它通过 setup 函数、响应式 API（如 ref、reactive、computed）、生命周期钩子以及自定义组合函数，让我们能够更加模块化、清晰地组织和复用代码。这在构建大型应用时，能够显著提高代码的维护性和可读性。

评论区
评论列表
menu