Vant Use useToggle 组合式函数实战：用 10 行源码实现布尔状态切换

Vant Use useToggle 组合式函数实战用 10 行源码实现布尔状态切换【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant导读useToggle是 Vant 移动端组件库内置组合式函数Composition API集合 vant/use 中最基础、最常用的一个工具它专门用于在true和false之间切换布尔状态。无论是控制弹层显隐、播放与暂停、开关选中态还是任何需要取反切换的业务场景都可以用它替代手写的ref加取反逻辑。读完本文你将掌握useToggle的完整 API、源码级实现原理以及它在 Vant 组件如 Calendar 懒渲染、Barrage 播放控制中的真实落地用法。useToggle 是什么useToggle是 vant/use 提供的组合式函数其官方文档定义非常简单用于在true和false之间进行切换Used to switch betweentrueandfalse。它的核心价值在于把定义一个布尔状态 手动取反这一高频操作封装成一个原子化的 API返回值是一个[state, toggle]元组——state是响应式布尔状态toggle是切换函数调用toggle()时如果不传参数会自动取反当前值。安装与引入useToggle随vant/use包一起发布。根据 packages/vant-use/package.jsonvant/use当前版本为1.6.0仅依赖vue^3.0.0peerDependencies是一个零额外依赖、sideEffects: false的纯 ESM/CJS 双格式包支持 tree-shaking。安装方式来自 packages/vant-use/README.md# with npm npm i vant/use # with yarn yarn add vant/use # with pnpm pnpm add vant/use # with Bun bun add vant/use安装后即可引入使用import { useToggle } from vant/use;vant/use的入口文件 packages/vant-use/src/index.ts 通过export *统一导出了useRect、useToggle、useRelation、useCountDown、useClickAway、useWindowSize、useScrollParent、useEventListener、usePageVisibility、useCustomFieldValue、useRaf、onMountedOrActivated等全部组合式函数useToggle是其中使用门槛最低的一个。基本用法官方文档use-toggle.en-US.md给出的基本用法如下import { useToggle } from vant/use; export default { setup() { const [state, toggle] useToggle(); toggle(true); console.log(state.value); // - true toggle(false); console.log(state.value); // - false toggle(); console.log(state.value); // - true }, };这里体现了useToggle的全部三种调用方式toggle(true)显式将状态设为truetoggle(false)显式将状态设为falsetoggle()不传参数时自动取反——当前值为false时切换为true反之亦然。state是一个Refboolean因此在组合式 API 中读取时需要使用.value在template模板中则会被自动解包直接使用state即可。在script setup中使用上述示例是 Options API 的setup()写法。在更现代的script setup语法Vant 自身的演示代码即采用此写法中用法完全一致script setup import { useToggle } from vant/use; const [visible, toggle] useToggle(false); /script template button clicktoggle() {{ visible ? 收起 : 展开 }} /button /template设置默认值useToggle接受一个可选的初始值参数defaultValue用于指定布尔状态的初始状态。默认值为falseimport { useToggle } from vant/use; export default { setup() { const [state, toggle] useToggle(true); console.log(state.value); // - true }, };从源码packages/vant-use/src/useToggle/index.ts可以看到默认值参数的实现方式import { ref } from vue; export function useToggle(defaultValue false) { const state ref(defaultValue); const toggle (value !state.value) { state.value value; }; return [state, toggle] as const; }两个值得注意的源码细节defaultValue false利用 ES6 默认参数语法实现不传则初始为false这与文档中参数表defaultValue默认值false的说明完全对应toggle (value !state.value)toggle函数的形参同样使用了默认参数——当调用方未传参时value自动取state.value的取反值从而实现了无参调用即取反的核心行为。API 说明类型定义官方文档给出的 TypeScript 类型声明为function useToggle( defaultValue: boolean, ): [Refboolean, (newValue: boolean) void];值得注意的是源码实现packages/vant-use/src/useToggle/index.ts使用了as const断言返回元组return [state, toggle] as const;as const让返回值的类型被精确推断为只读元组readonly [Refboolean, (value?: boolean) void]从而保证const [state, toggle] useToggle()这种解构写法在 TypeScript 下获得完整的类型推导。参数Params名称说明类型默认值defaultValue默认值booleanfalse返回值Return Value名称说明类型state状态值Refbooleantoggle切换状态值的函数(newValue?: boolean) void源码级实现原理整个useToggle的实现只有 10 行packages/vant-use/src/useToggle/index.ts核心逻辑可以拆解为三步创建响应式状态ref(defaultValue)基于传入的默认值创建一个Refboolean定义切换函数toggle函数接收可选参数value未传参时以!state.value作为默认值随后将其写入state.value返回元组以as const形式返回[state, toggle]供调用方解构。从这个实现可以推断出两个使用要点toggle本质上是一个状态赋值器它并不关心当前值是什么只是把计算好的新值写入state取反逻辑完全由默认参数!state.value承担由于toggle依赖闭包捕获的state因此它与state的生命周期绑定——组件卸载后不应再调用toggle这一点与 Vue 响应式系统的约定一致。在 Vant 组件库中的真实应用useToggle不是文档里的摆设Vant 自身的组件源码就大量使用了它。这里有两个典型的落地场景。场景一Calendar 月视图的懒渲染控制在 packages/vant/src/calendar/CalendarMonth.tsx 中useToggle被用于控制日历月视图的懒渲染import { useRect, useToggle } from vant/use; // ... setup(props, { emit, slots }) { const [visible, setVisible] useToggle(); // ... const shouldRender computed(() visible.value || !props.lazyRender); // ... }这里useToggle()不传参数初始状态为false不可见/不渲染当月份滚动进入可视区域时调用setVisible(true)将其置为可见从而触发渲染。shouldRender这一计算属性把是否已可见与是否开启懒渲染两个条件组合在一起实现了日历月份的按需渲染、优化首屏性能。这个用例展示了useToggle在组件库内部承担布尔状态控制器的真实角色。场景二Barrage 弹幕的播放/暂停控制在弹幕组件 packages/vant/src/barrage/demo/index.vue 的演示代码中script setup langts import { useToggle } from vant/use; const [isPlay, toggle] useToggle(false); watch(isPlay, () { if (isPlay.value) videoBarrage.value?.play(); else videoBarrage.value?.pause(); }); /script演示页使用useToggle(false)管理弹幕的播放状态并通过watch监听isPlay的变化来调用弹幕实例的play()/pause()方法——这正是布尔状态驱动副作用的经典模式同一写法也被收录在 packages/vant/src/barrage/README.md 中供开发者参考。总结useToggle用最小的 API 面一个参数、一个元组返回值解决了 Vue 3 开发中最常见的布尔状态管理需求。它的三个核心特点值得记住语义化toggle()无参调用即取反代码意图一目了然类型友好as const元组返回 完整的 TypeScript 类型声明开发体验良好零成本全实现仅 10 行源码无任何额外依赖tree-shaking 友好。无论是自己项目里的显隐控制、开关状态还是阅读 Vant 组件源码时理解Calendar、Barrage等组件的行为掌握useToggle都能让你更快地上手vant/use这一整套组合式函数工具集。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考