Vue 3 30天精进之旅：Day 09

Vue 3 30天精进之旅：Day 09 - 组合式API

在Vue 3中，组合式API（Composition API）是一个引入的新特性，它为开发者提供了一种更灵活的方式来构建和组织组件。与传统的选项API相比，组合式API更注重逻辑的复用和逻辑的组合，让我们更容易处理大型应用中的复杂性。今天，我们将深入探讨组合式API的核心概念和用法。

1. 组合式API概述

组合式API通过 setup 函数来定义组件的逻辑。这一函数会在组件实例创建之前执行，能够访问到组件的 props、context 和响应式数据。通过组合式API，我们能够将相同功能的逻辑提取到一个地方，从而减少代码重复，提高可维护性。

以下是组合式API的一个基本结构示例：

javascript

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

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

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

    function increment() {
      count.value++;
    }

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

在上面的示例中，我们使用 ref 创建一个响应性的 count 变量，并定义了 increment 方法来增加计数值。所有数据和方法都在 setup 中声明，然后返回到模板中使用。

2. 响应式数据

2.1. `ref` 和 `reactive`

在组合式API中，我们通常使用 ref 或 reactive 来创建响应式数据。

ref ：用于基本数据类型（如数字、字符串等）的响应式处理。

javascript

import { ref } from 'vue';

const count = ref(0);
count.value++; // 访问 ref 值需要使用 .value

reactive ：用于对象或数组的响应式处理。

javascript

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

state.count++; // 直接访问属性

ref 和 reactive 的选择通常取决于数据的类型和结构。

2.2. 响应式数据的级联

使用组合式API时，ref 和 reactive 可以轻松实现深层次的响应式：

javascript

import { reactive } from 'vue';

const state = reactive({
  user: {
    name: 'Alice',
    age: 30,
  },
});

state.user.age++; // 直接访问

3. 计算属性与侦听器

组合式API还允许我们使用 computed 和 watch 来创建计算属性和侦听器。

3.1. 计算属性

使用 computed 来声明计算属性：

javascript

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount,
    };
  },
};

计算属性会依赖于它们的响应式依赖，只有在这些依赖改变时才会重新计算。

3.2. 侦听器

使用 watch 来侦听数据的变化：

javascript

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  },
};

watch 可以侦听单个值，也可以侦听一个对象的变化，实现更复杂的数据反应。

4. 生命周期钩子

在组合式API中，我们还可以通过在 setup 中使用生命周期钩子。

javascript

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

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

这里我们使用 onMounted 和 onUnmounted 在组件的生命周期中执行特定操作。

5. 逻辑重用

组合式API的一个主要优点是其逻辑重用的能力。我们可以通过创建组合函数将多个逻辑结合在一起：

javascript

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

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

// 在组件中使用
<template>
  <div>
    <p>{
  
  { count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

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

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

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

这样，我们就可以在多个组件中复用 useCounter 函数，保持代码的DRY（Don't Repeat Yourself）原则。