Vue.js Composition API 指南

Vue.js 的 Composition API 是 Vue 3 中的一个重要特性，它提供了一种新的方式来组织组件的逻辑。下面是一些关于 Composition API 的基本概念和使用方法。

基本概念

Composition API 基于 Vue 3 的响应式系统，允许开发者将组件的逻辑分解为可重用的函数。这使得代码更加模块化和可维护。

响应式引用（Reactive Refs）

响应式引用允许你创建响应式的数据变量。以下是一个使用 ref 的例子：

import { ref } from 'vue';

const count = ref(0);

响应式响应式对象（Reactive Reactives）

响应式对象允许你创建响应式的对象。以下是一个使用 reactive 的例子：

import { reactive } from 'vue';

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

组合式函数（Composition Functions）

组合式函数允许你在组件中组织逻辑。以下是一个使用组合式函数的例子：

import { ref, watch } from 'vue';

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

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

    return {
      count,
      doubleCount
    };
  }
};

生命周期钩子（Lifecycle Hooks）

Composition API 提供了一组生命周期钩子，类似于 Vue 2 中的选项式 API。以下是一些常用的生命周期钩子：

• onMounted：组件挂载后调用
• onUpdated：组件更新后调用
• onUnmounted：组件卸载前调用

import { onMounted, onUnmounted } from 'vue';

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

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

扩展阅读

想了解更多关于 Vue.js Composition API 的内容？请访问我们的官方文档。

[

希望这份指南能帮助你更好地理解 Vue.js Composition API。