阅读数:45 评论数:0

一、概述 

Vue 3 引入了 Composition API，这是一套新的基于函数的 API，它允许开发者更灵活地组织和重用代码。与 Vue 2 中的 Options API 相比，Composition API 提供了一种更灵活的方式来组合和管理组件的逻辑。

二、主要特性

Composition API 的核心是 setup 函数，它是组件的入口点，用于声明响应式状态、计算属性、方法和生命周期钩子等。

1、响应式状态

使用 ref 和 reactive 函数可以定义响应式状态：

• ref 用于定义一个响应式的基本类型值。
• reactive 用于定义一个响应式的对象。

import { ref, reactive } from 'vue';

const count = ref(0); // 基本类型
const state = reactive({ name: 'Vue', version: '3' }); // 对象

2、计算属性

计算属性可以通过 computed 函数创建：

import { computed } from 'vue';

const count = ref(1);
const doubledCount = computed(() => count.value * 2);

3、侦听器

watch 和 watchEffect 函数可以用来侦听响应式状态的变化：

import { watch, watchEffect } from 'vue';

const count = ref(0);

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

// watchEffect
watchEffect(() => console.log(`count is now ${count.value}`));

4、生命周期钩子

在 setup 函数内部，可以使用生命周期钩子，如 onMounted, onUpdated, onUnmounted：

import { onMounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('组件已挂载');
  });
}