Vue 3.0中核心的Composition API

在当今快速发展的前端生态系统中，Vue 3.0以其革命性的Composition API重新定义了组件开发的范式。作为Vue框架的一次重大进化，Composition API不仅解决了Options API在复杂组件中面临的逻辑复用和组织难题，更为开发者提供了更灵活、更强大的代码组织方式。

随着应用复杂度的不断提升，传统的Options API在处理大型组件时逐渐显现出局限性——相关逻辑被分散在不同的选项中，代码阅读和维护变得困难。Composition API应运而生，它允许开发者基于逻辑功能而非选项类型来组织代码，使得相关代码能够紧密聚合在一起，大大提升了代码的可读性和可维护性。

本文将介绍一些Vue 3.0核心的Composition API，从基础概念到高级用法，带您全面了解这一现代前端开发利器。

1. 响应式基础

1.1. ref

含义：创建一个包含单一响应式值的对象。

使用场景：用于定义单个基本类型（如字符串、数字）的响应式数据。

import { ref } from 'vue';
const count = ref(0);
function increment() {
    count.value++;
}

1.2. reactive

含义：创建一个深度响应的对象。

使用场景：用于定义包含多个属性的复杂数据结构。

import { reactive } from 'vue';
const state = reactive({
    count: 0,
    name: 'vue'
});

1.3. computed

含义：创建一个基于其他响应式状态的计算属性。

使用场景：当需要从其他响应式数据派生出新的值时使用。

import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);

1.4. readonly

含义：创建一个只读的响应式对象。

使用场景：保护状态数据不被外部修改。

import { reactive, readonly } from 'vue';
const state = reactive({ count: 0 });
const readonlyState = readonly(state);

1.5. watch

含义：监听一个或多个响应式数据的变化，并执行回调函数。

使用场景：需要对特定响应式数据的变化做出反应时使用。

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
});

1.6. watchEffect

含义：立即运行传入的副作用函数，并在其依赖的响应式状态发生变化时重新运行。

使用场景：用于自动收集依赖并重新执行副作用。

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
    console.log(`Count is: ${count.value}`);
});

1.7. watchPostEffect

含义：与 watchEffect 类似，但在 DOM 更新后执行。

使用场景：需要在 DOM 更新后执行副作用时使用。

import { ref, watchPostEffect } from 'vue';
const count = ref(0);
watchPostEffect(() => {
    console.log(`DOM updated, count is: ${count.value}`);
});