vue中的组合式api

阅读数:8 评论数:0

分类

html/css/js

正文

一、概述

在 Vue 2.x 中，开发者通常使用选项式 API来组织组件的代码，这种方式通过在 data、methods、computed 等选项中定义不同的功能来组织代码。然而，当组件的逻辑变得复杂时，这种方式会导致多个选项之间的逻辑紧密耦合，难以管理和复用。

组合式 API 的核心思想是通过 setup() 函数将组件的所有逻辑组织成独立的函数模块，这样可以灵活地组合、复用和管理这些逻辑，而不再依赖于 Vue 实例中的不同选项（如 data、methods、computed 等）。

二、核心概念

1、setup函数

setup() 是组合式 API 的核心。它是 Vue 组件的入口点，在组件实例化之前执行。setup() 中的代码主要用于初始化响应式状态、定义计算属性和方法等。

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

<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');  // 创建响应式数据
    return { message };  // 返回响应式数据，以便在模板中使用
  }
};
</script>

2、响应式api：ref和reactive

组合式 API 引入了 ref 和 reactive 来定义响应式数据：

ref：用于创建基本数据类型（如字符串、数字、布尔值）的响应式数据。
reactive：用于创建对象或数组的响应式数据

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建一个响应式的基本数据
    const person = reactive({ name: 'John', age: 30 }); // 创建一个响应式对象

    return { count, person };
  }
};

3、computed和watch

computed 用于创建计算属性，类似于选项式 API 中的 computed，用于根据响应式数据计算和缓存结果。
watch 用于监听数据的变化，执行副作用操作，类似于选项式 API 中的 watch。

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

export default {
  setup() {
    const count = ref(0);

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

    // 创建副作用：监听 count 的变化
    watch(count, (newValue) => {
      console.log('count changed:', newValue);
    });

    return { count, doubleCount };
  }
};

4、生命周期钩子

Vue 3 中的生命周期钩子函数，如 onMounted、onUpdated、onUnmounted，与组合式 API 一起使用，用于处理组件的生命周期。

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');

    onMounted(() => {
      console.log('Component Mounted');
    });

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

    return { message };
  }
};

三、优势

1、更好的逻辑组织和复用

组合式 API 允许将组件的逻辑拆分成多个小的、独立的函数（通常称为“hook”或“composables”）。每个函数封装了特定的功能或行为，可以在不同的组件中复用。这种方式使得逻辑复用变得更容易，也使得组件更加易于理解和维护。

例如，如果你有多个组件需要用到计时器逻辑，可以将计时器逻辑封装在一个 useTimer 函数中，并在多个组件中调用：

// useTimer.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useTimer() {
  const time = ref(0);
  let interval: ReturnType<typeof setInterval>;

  onMounted(() => {
    interval = setInterval(() => {
      time.value++;
    }, 1000);
  });

  onUnmounted(() => {
    clearInterval(interval);
  });

  return { time };
}

import { useTimer } from './useTimer';

export default {
  setup() {
    const { time } = useTimer();
    return { time };
  }
};

2、提高可读性和可维护性

组合式 API 使得相关逻辑可以组织在一起，避免了选项式 API 中的数据、方法、计算属性和生命周期钩子之间的耦合。例如，所有关于计时器的代码都可以放在一个 useTimer Hook 中，而不是分散在 data、methods、mounted 等选项中。

3、更好的TypeScript支持

组合式 API 提供了更好的 TypeScript 支持，尤其是在类型推导和类型检查方面。由于 setup() 函数是函数式的，它的返回值更加明确和类型安全。

秒吧学习