在 vue 3 中，用 computed 实现多选标签已选中数量的动态统计非常简洁：只需将响应式数组（如 selectedtags）作为依赖，返回其 .length 即可，它会自动响应增删变化；推荐使用 ref([]) 或 reactive([]) 初始化，每个标签用唯一 id 管理，通过 filter 或 push 维护选中状态，避免直接操作 dom 或修改 length 导致响应性丢失。
在 Vue 3 中，用 computed 实现多选标签已选中数量的动态统计非常简洁：只需将一个响应式数组（如 selectedTags）作为依赖，返回它的 .length 即可。它会自动响应增删变化，无需手动触发更新。
绑定选中状态的数据结构要合理
确保你有一个响应式的数组来存放已选中的标签 ID 或对象，比如：
✅ 推荐（响应式数组）：
- 使用
ref([])或reactive([])初始化，保证响应性 - 每个标签用唯一标识（如
id）管理，避免直接操作 DOM 或用 class 判断选中状态 - 例如：
const selectedTags = ref(['vue', 'react', 'ts'])
用 computed 直接统计长度
定义一个计算属性，返回数组长度即可，Vue 会自动追踪依赖：
const selectedCount = computed(() => selectedTags.value.length)
模板中直接使用：
<span>已选 {{ selectedCount }} 个标签</span>
只要 selectedTags 被 push、pop、splice 或整体赋值，selectedCount 就实时更新。
配合多选逻辑一起用（如 toggle）
在标签点击事件中维护 selectedTags，computed 会自动响应：
- 存在则移除：
selectedTags.value = selectedTags.value.filter(id => id !== tagId) - 不存在则添加：
selectedTags.value.push(tagId) - 推荐用
includes+ 条件更新，避免重复添加
注意避免常见陷阱
❌ 错误写法（失去响应性）：
- 用普通 JS 数组（非
ref/reactive）存储选中项 - 直接修改数组 length（如
arr.length = 0），部分场景可能不触发更新 - 在
computed中读取非响应式变量或异步数据
只要确保源头是响应式数据，computed 统计就可靠、轻量、无副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
