Vue 3 Composition API 教程

Vue 3 的 Composition API 提供了一种更加灵活和可复用的方式来组织和重用代码。本文将介绍如何使用 Vue 3 的 Composition API 进行组件开发。

基本概念

Composition API 基于 Vue 3 的响应式系统，它允许我们以声明式的方式定义组件的逻辑。以下是一些基本概念：

setup() 函数: 每个组件的入口点，用于定义响应式状态和函数。
ref() 和 reactive(): 创建响应式引用和对象。
computed() 和 watch(): 创建基于响应式状态的计算属性和侦听器。

入门示例

下面是一个简单的 Vue 3 Composition API 示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse</button>
  </div>
</template>

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

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

    function reverseMessage() {
      message.value = message.value.split('').reverse().join('');
    }

    return { message, reverseMessage };
  }
};
</script>

响应式状态

Vue 3 的 Composition API 使用 ref 和 reactive 函数来创建响应式状态。

ref: 用于基本类型，返回一个响应式引用对象。
reactive: 用于对象类型，返回一个响应式对象。

import { ref, reactive } from 'vue';

const count = ref(0);
const user = reactive({ name: 'Vue 3' });

计算属性

computed 函数用于创建基于响应式状态的计算属性。

import { computed } from 'vue';

const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});

侦听器

watch 函数用于侦听响应式状态的变化，并在变化时执行回调函数。

import { watch } from 'vue';

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

扩展阅读

如果您想了解更多关于 Vue 3 Composition API 的内容，请参考以下链接：

结语

Vue 3 的 Composition API 提供了一种更加强大和灵活的方式来构建组件。通过使用 Composition API，您可以更好地组织和重用代码，提高开发效率。