watchEffect 的核心是响应式驱动菜单和按钮的显隐逻辑，而非过滤路由表；它监听权限状态动态更新 filteredMenus 或控制按钮 DOM 显隐，白名单路径由前置守卫处理，不参与 watchEffect。
用 watchEffect 处理权限白名单的自动过滤，核心不是“过滤路由数组”，而是**响应式驱动菜单和按钮的显隐逻辑**——它不改路由表本身，而是根据当前权限状态，动态决定哪些菜单项、哪些按钮该显示。白名单（如 ['/login', '/404', '/500']）通常走静态配置或前置守卫放行，watchEffect 负责的是“有权限才渲染”的那一层。
监听权限状态并实时更新菜单列表
假设你从 Pinia store 中解构出 userPermissions（一个 ref<string></string> 或 computed），菜单数据是前端定义的原始列表（含 path 和 requiredPermission 字段）：
- 在
setup()中调用watchEffect，内部用filter筛出用户拥有权限的菜单项 - 把筛选结果赋给一个
ref（如filteredMenus），模板中直接遍历它，无需手动v-if每一项 - 确保
userPermissions是响应式的；若权限来自异步接口，建议用computed封装稳定视图（例如const hasPerm = computed(() => userPermissions.value.includes('user:edit'))）
配合路由元信息做按钮级权限控制
按钮权限常通过自定义指令（如 v-has-perm="'user:delete'"）实现，但指令内部也可用 watchEffect 提升响应性：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 指令的
mounted钩子中，用watchEffect监听userPermissions和传入的权限码 - 权限匹配则保留按钮 DOM，不匹配则
el.remove()或添加hidden类 - 避免在指令里直接操作
el.style.display，优先用 class 控制，便于 CSS 统一管理
白名单路径要单独处理，不依赖 watchEffect
/login、/404 这类路径属于“无需权限校验”的静态入口，watchEffect 不适合也不应该介入：
立即学习“前端免费学习笔记（深入）”；
- 它们应在路由配置中明确标记
meta: { public: true } - 由
router.beforeEach统一拦截：若目标路由meta.public === true，直接next()；否则才检查权限 -
watchEffect只负责“权限就绪后”的 UI 同步，不承担初始访问的安全兜底
防抖与避免重复触发
权限数据可能因接口重试、loading 状态变化而短暂抖动，导致 watchEffect 多次执行：
- 不要监听原始 loading 状态，而是监听最终稳定的权限数组（如
store.permissions） - 若权限字段嵌套较深（如
store.user?.role?.perms），用computed提前扁平化，再传给watchEffect - 组件卸载时自动清理：可用封装好的
useAutoRun组合式函数（内部调用onBeforeUnmount）
