vue3 组合式函数使用

组合式函数

官方文档

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

封装一些通用逻辑，并且可以使用 vue 中的 api

约定

命名

组合式函数约定用驼峰命名法命名，并以“use”作为开头。

输入参数

处理一下输入参数是 ref 或 getter 而非原始值的情况。可以利用 toValue() 工具函数来实现：

import { toValue } from "vue";

export function useTest(params) {
	const val = toValue(params);
}

使用限制

组合式函数只能在 <script setup> 或 setup() 钩子中被调用。在这些上下文中，它们也只能被同步调用。在某些情况下，你也可以在像 onMounted() 这样的生命周期钩子中调用它们。

基本使用

src/hooks/useTest/index.ts

import { ref } from "vue";

export function useTest() {
	const num = ref(1);

	function add(n: number) {
		num.value += n;
	}

	return {
		num,
		add,
	};
}

.vue 文件使用

<template>
	<div>num---{{ num }}</div>

	<div @click="add(3)">add</div>
</template>