watchEffect 不提供自动缓存，需用 ref 管理折叠状态并结合 localStorage 持久化；它通过自动依赖追踪高效联动 UI 更新，但状态变更必须在事件处理器中执行以避免循环触发。
用 ref 管理折叠状态，watchEffect 响应变化
侧边栏是否折叠，本质是一个布尔值状态。把它声明为响应式数据，`watchEffect` 才能感知并驱动视图：✅ 正确做法：
- 用 ref 定义
isCollapsed，初始值可从 localStorage 读取，实现“刷新不丢失” - 在 watchEffect 内读取
isCollapsed.value，同时更新 DOM 类名、el-menu 的:collapse属性等 - 点击按钮时只改
isCollapsed.value，其余交由 watchEffect 自动同步
示例代码片段：
import { ref, watchEffect } from 'vue'
const isCollapsed = ref(localStorage.getItem('sidebar-collapsed') === 'true')
// 同步到本地存储
watchEffect(() => {
localStorage.setItem('sidebar-collapsed', isCollapsed.value)
})
// 驱动 UI 更新（比如传给 el-menu）
watchEffect(() => {
// 这里可触发 class 切换、宽度计算、图标切换等
document.body.classList.toggle('sidebar-collapsed', isCollapsed.value)
})
为什么不用 watch？watchEffect 更适合这个场景
折叠状态通常不涉及“新旧值对比”，也不需要深度监听对象——它就是一个开关。用 watchEffect 更自然：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 无需写
watch(isCollapsed, ...)，减少一层包装 - 初始化时立即生效，页面一打开就按 localStorage 的值渲染，不用等 mounted
- 如果后续还要联动其他响应式变量（比如主题色、用户权限），只要在同一个 watchEffect 里读取，它会自动合并依赖
避免常见陷阱：别让它“反复触发”
如果在 watchEffect 里修改了它正在读取的响应式变量，会造成无限循环。例如：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：在 watchEffect 中又给
isCollapsed.value = !isCollapsed.value - ✅ 正确：状态变更只发生在事件处理器中（如
@click="isCollapsed.value = !isCollapsed.value"），watchEffect 只负责“反应”，不负责“决策”
进阶：配合 provide/inject 实现跨组件响应
当菜单项、头部折叠按钮、布局容器分散在不同组件时，可以把 isCollapsed 通过 provide 注入，子组件用 inject 获取，再用 watchEffect 监听它：
- 父组件 provide：
provide('sidebarState', isCollapsed) - 任意子组件 inject：
const isCollapsed = inject('sidebarState') - 再用 watchEffect 读取它 → 实现“一处操作，全局响应”
