VUE3中一个简单的HOOKS

最新推荐文章于 2024-02-21 11:49:29 发布

IKAROSZS

最新推荐文章于 2024-02-21 11:49:29 发布

阅读量96

点赞数 1

文章标签：前端 typescript Powered by 金山文档

本文链接：https://blog.csdn.net/zs00805/article/details/129754596

版权

Vue3引入了hooks机制，旨在实现组件的高内聚和低耦合。hooks允许代码复用，如示例中的useCounter函数，它返回一个包含计数器操作的对象。在实际应用中，可以通过import导入并使用这些hooks，如增加和减少计数，从而提高代码组织效率。

摘要由CSDN通过智能技术生成

vue3中新增了hooks写法

其目标就是：高内聚低耦合

优点：可以随时被引用，复用

熟悉之后简直快乐到飞起！

下面就是一个简单的例子：

//创建一个hooks.ts
export default const useCounter = (initialValue: number) => {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement,
  };
};
//使用
// 引入hooks
import useCounter from './hooks'

const { count, increment, decrement } = useCounter(0);

console.log(count.value); // 0

increment();

console.log(count.value); // 1

decrement();

console.log(count.value); // 0

以上就是一个简单的vue3中hooks的使用

作为初学vue3还需要多多学习！