watcheffect 通过自动追踪响应式数据（如 selections.value.length 或遍历元素）实现对选中项集合变化的响应，适用于更新 ui 状态（如按钮启用、计数），但不应直接执行批量删除等异步业务逻辑。
在 Vue 3 中，watchEffect 本身不直接“同步”选中项集合，而是通过自动追踪响应式数据的变化，来触发副作用逻辑（比如更新 UI、发起请求或清理状态）。表格多选删除场景中的“选中项集合”通常是一个响应式数组（如 ref([]) 或 reactive({ selections: [] })），只要它被 watchEffect 内部读取，就能被自动追踪——变化时重新执行，从而实现行为上的“同步”。关键在于写法是否让依赖关系被正确捕获。
确保 selection 数组被 watchEffect 自动追踪
watchEffect 不会监听数组内容变化，除非你在它的回调函数里显式访问该数组（或其长度、元素等）。
- ✅ 正确：在 watchEffect 内读取
selections.value.length或遍历selections.value，它就会响应数组增删 - ❌ 错误：只把
selections当作参数传入但没读取，watchEffect 不会感知变化，只执行一次
用 watchEffect 响应选中项变化并触发批量删除准备
适合用于“用户勾选后立即启用/禁用批量删除按钮”，或“实时统计已选数量并校验权限”这类轻量副作用。
- 定义一个响应式 selections：
const selections = ref([]) - 在 watchEffect 中读取 selections 并更新相关状态：
例如：
const canBatchDelete = ref(false)<br>const selectedCount = ref(0)<br><br>watchEffect(() => {<br> selectedCount.value = selections.value.length<br> canBatchDelete.value = selections.value.length > 0 && hasPermission('delete')<br>})
这样，每次勾选/取消勾选导致 selections 变化，selectedCount 和 canBatchDelete 就会自动更新。
不要用 watchEffect 替代 delete 操作本身
批量删除是明确的一次性业务动作（发请求、清数据、重置状态），不属于“响应式副作用”的典型场景。watchEffect 适合监听 + 副作用，不适合承载异步删除逻辑。
- ✅ 推荐：用
@selection-change（Element Plus）或v-model更新selections，再由独立方法（如handleBatchDelete）处理删除 - ⚠️ 避免：在 watchEffect 里写
if (selections.value.length) await api.delete(...)—— 容易重复触发、难以控制时机、无法手动取消
配合 useRoute 或其他响应式源做联动更自然
如果表格数据随路由参数变化（如 /user/:id），而选中项又需在参数变更时清空，这时 watchEffect 就很合适：
- 它能同时追踪
route.params.id和selections - 当 id 改变 → 表格刷新 →
selections被清空 → watchEffect 捕获到变化，自动重置 UI 状态
示例：
watchEffect(() => {<br> const id = route.params.id<br> if (id && selections.value.length > 0) {<br> console.warn('路由切换，清空当前选中')<br> selections.value = []<br> }<br>)前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
