Vue 框架学习系列三：Vue 3 的 Composition API 深入解析

在 Vue 3 中，Composition API 是一项重大的新特性，它提供了一种全新的方式来组织和复用组件逻辑。与 Vue 2 中的 Options API 相比，Composition API 允许开发者将组件的响应式状态、计算属性、方法、生命周期钩子等逻辑以函数的形式组织起来，从而使得代码更加灵活和可复用。本篇文章将深入解析 Vue 3 的 Composition API。

为什么需要 Composition API？

在 Vue 2 的 Options API 中，组件的逻辑被分散在data、computed、methods、watch等选项中。这种组织方式在小型组件中可能工作得很好，但随着组件功能的增加，代码变得越来越难以理解和维护。特别是在处理大型组件或需要跨组件复用逻辑时，Options API 的局限性尤为明显。

Composition API 的出现正是为了解决这些问题。它允许开发者将相关的逻辑组合在一起，形成一个可复用的代码块。这样做不仅可以提高代码的可读性和可维护性，还可以促进逻辑复用，减少代码冗余。

Composition API 的核心概念

setup() 函数 setup() 函数是 Composition API 的入口点。它是一个在组件创建之前被调用的函数，用于设置组件的响应式状态、计算属性、方法等。与 Options API 不同的是，setup() 函数在组件的 beforeCreate 和 created 生命周期钩子之前被调用，并且它不接受 this 关键字作为参数。

import { ref } from 'vue';  

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

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

    return {  
      count,  
      increment  
    };  
  }  
};

响应式引用（ref 和 reactive）

Vue 3 提供了 ref() 和 reactive() 两个函数来创建响应式状态。ref() 用于创建一个响应式的基础类型值（如数字、字符串等），而 reactive() 用于创建一个响应式的对象或数组。

import { ref, reactive } from 'vue';  

const count = ref(0); // 响应式的数字  
const state = reactive({  
  name: 'Vue 3',  
  isActive: true  
}); // 响应式的对象

计算属性（computed）

在 Composition API 中，你可以使用 computed() 函数来创建计算属性。计算属性是基于它们的响应式依赖进行缓存的。只有当相关依赖发生改变时，计算属性才会重新求值。

import { ref, computed } from 'vue';  

const count = ref(0);  
const doubleCount = computed(() => count.value * 2);

生命周期钩子

Vue 3 的 Composition API 提供了与 Options API 相对应的生命周期钩子函数，但它们需要被显式地从 vue 包中导入，并在 setup() 函数内部调用。

生命周期钩子
Vue 3 的 Composition API 提供了与 Options API 相对应的生命周期钩子函数，但它们需要被显式地从 vue 包中导入，并在 setup() 函数内部调用。

监听器（watch 和 watchEffect）

watch() 和 watchEffect() 是 Composition API 中用于观察响应式状态变化的函数。watch() 用于观察特定的响应式引用或响应式对象属性，并在它们变化时执行回调函数。而 watchEffect() 会在其依赖的响应式状态变化时立即重新运行。

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

const count = ref(0);  

watchEffect(() => {  
  console.log(count.value);  
});  

watch(count, (newVal, oldVal) => {  
  console.log(`count 从 ${oldVal} 变为 ${newVal}`);  
});

总结

Vue 3 的 Composition API 提供了一种全新的方式来组织和复用组件逻辑，使得代码更加灵活和可维护。通过 setup() 函数、响应式引用、计算属性、生命周期钩子和监听器等核心概念，开发者可以构建出高性能、可复用的 Vue 组件。在后续的文章中，我们将继续探索 Vue 3 的其他特性和最佳实践，帮助你更好地掌握这个强大的前端框架。