vue3中hooks用法详解

vue3中hooks用法详解

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

hooks和utils区别
相同点：

通过 hooks 和 utils 函数封装， 可以实现组件间共享和复用，提高代码的可重用性和可维护性。
异同点：

表现形式不同：hooks 是在 utils 的基础上再包一层组件级别的东西(钩子函数等)； utils一般用于封装相应的逻辑函数，没有组件的东西；

数据是否具有响应式：hooks 中如果涉及到 ref，reactive，computed 这些 api 的数据，是具有响应式的； 而 utils 只是单纯提取公共方法就不具备响应式；

作用范围不同：hooks 封装，可以将组件的状态和生命周期方法提取出来，并在多个组件之间共享和重用； utils 通常是指一些辅助函数或工具方法，用于实现一些常见的操作或提供特定功能。

总结：

utils 是通用的工具函数，而 hooks 是对 utils 的一种封装，用于在组件中共享状态逻