学做游戏 网站系统优化的方法

Vue 3 引入了 Composition API，它提供了一种更灵活的方式来组织和重用逻辑。与 Vue 2 的 Options API 相比，Composition API 允许你将组件的逻辑按功能组织到函数中，而不是将它们分散到组件选项对象中。以下是如何在 Vue 3 中使用 Composition API 的基本步骤：

1. 引入必要的函数

首先，你需要从 vue 包中引入 ref、reactive、computed、watch、watchEffect 等 Composition API 提供的函数。这些函数允许你创建响应式状态、计算属性和侦听器。

javascript复制代码

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

2. 使用 setup 函数

setup 函数是 Composition API 的入口点。它是组件中所有 Composition API 调用的地方。setup 函数在组件创建之前被调用，并且它会在 beforeCreate 和 created 生命周期钩子之前执行。

javascript复制代码

	export default {
	setup() {
	// 你的 Composition API 代码将放在这里
	}
	};

3. 创建响应式状态

使用 ref 或 reactive 来创建响应式状态。ref 用于基本数据类型，而 reactive 用于对象或数组。

javascript复制代码

	const count = ref(0);
	const person = reactive({
	name: 'Alice',
	age: 30
	});

4. 使用计算属性和侦听器

你可以使用 computed 来创建计算属性，使用 watch 或 watchEffect 来侦听响应式状态的变化。

javascript复制代码

	const doubleCount = computed(() => count.value * 2);
	watchEffect(() => {
	console.log(`Count is: ${count.value}`);
	});
	watch(count, (newValue, oldValue) => {
	console.log(`Count changed from ${oldValue} to ${newValue}`);
	});

5. 暴露给模板

setup 函数需要返回所有需要在模板中使用的响应式状态、计算属性、方法等。

javascript复制代码

	export default {
	setup() {
	const count = ref(0);
	const increment = () => {
	count.value++;
	};
	return {
	count,
	increment
	};
	}
	};

6. 在模板中使用

现在，你可以在模板中像使用其他组件选项一样使用 count 和 increment。

html复制代码

	<template>
	<div>
	<p>{{ count }}</p>
	<button @click="increment">Increment</button>
	</div>
	</template>

7. 使用生命周期钩子

Composition API 提供了与 Options API 相同的生命周期钩子，但你需要从 vue 中显式导入它们，并在 setup 函数中使用。

javascript复制代码

	import { onMounted, onUnmounted } from 'vue';
	export default {
	setup() {
	onMounted(() => {
	console.log('Component is mounted!');
	});
	onUnmounted(() => {
	console.log('Component is unmounted!');
	});
	// ... 其他 Composition API 代码
	}
	};

8. 组件间的通信

Composition API 并没有改变 Vue 的组件间通信方式（如 props、emit、provide/inject、Vuex、Vue Router 等）。但是，你可以将逻辑封装在自定义的 Composition API 函数中，并在多个组件之间重用这些函数，从而实现更高效的代码复用。

通过遵循这些步骤，你可以开始在你的 Vue 3 项目中使用 Composition API 来构建更灵活、更可维护的组件。