vue3 组合式函数使用

2023-12-18 19:13:27

组合式函数

官方文档

在 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>

文章来源:https://blog.csdn.net/weixin_43512977/article/details/134816850
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。