首页vue3 hooks封装控制多个实例

vue3 hooks封装控制多个实例

时间: 2025-06-28 07:21:59 浏览: 19

Vue 3 中的 Composition API 提供了一种更灵活的方式来组织和复用逻辑，类似于 React 的 Hooks。通过 Vue 3 的 `setup` 函数和组合式API，你可以更好地控制组件的状态管理和生命周期。为了封装并控制多个实例的行为，在 Vue 3 中可以创建自定义的 composition function (通常称为 "composable") 来共享业务逻辑、状态等资源，并保证它们之间的隔离性和独立可控性。下面是一个简单的例子： ```javascript // useCounter.js - 自定义 hook 文件 import { ref } from 'vue'; export function useCounter(initialValue = 0) { const count = ref(initialValue); // 定义增加计数器值的方法 const increment = () => { count.value++; }; // 返回需要暴露出去的内容 return { count, increment }; } ``` 然后可以在其他地方引入这个钩子函数用于不同的组件中而互不影响: ```javascript <template> <div> <p>Count: {{ counterA.count }}</p> <button @click="counterA.increment">Increment A</button> <hr /> <p>Another Count: {{ counterB.count }}</p> <button @click="counterB.increment">Increment B</button> </div> </template> <script setup> import { useCounter } from './useCounter'; const counterA = useCounter(5); // 第一个实例，初始值为5 const counterB = useCounter(); // 第二个实例，默认初始值0 </script> ``` 这里我们分别对两个计数器进行了初始化并且各自拥有独立的状态管理；点击按钮只会改变对应的那个计数器数值而不影响另一个。这样做不仅使得代码结构清晰明了而且提高了代码可维护性和复用度。每个使用的场景都可以获得新的状态副本，不会互相干扰。

阅读全文