Vue3 SFC 中优化 BEM 应通过计算属性或 useBem 组合式函数封装块名与修饰逻辑，避免模板硬编码；动态 modifier 需用响应式 key 拼接；搭配 scoped 时须在 style 中显式声明所有动态类名或改用 CSS Modules。
Vue3 的 SFC 中直接套用传统 BEM（如 block__element--modifier）写法，容易导致模板冗长、逻辑分散、class 维护成本高。真正有效的优化不是“少写几个下划线”，而是让 BEM 意图可声明、可复用、不污染模板结构。
v-bind:class + 计算属性封装 BEM 块名
把块名和基础修饰逻辑收进 computed 或 useBem 工具函数里，避免在模板里拼接字符串。否则一写就是：:class="['my-button', 'my-button__icon', {'my-button__icon--large': isLarge}]" —— 既重复又难读。
- 用一个计算属性返回完整 class 对象，例如：
buttonClasses返回{ 'my-button': true, 'my-button--primary': type === 'primary', 'my-button__label': true } - 块名（
my-button）只声明一次，所有子元素和修饰符都基于它派生，避免硬编码重复 - 若项目已用
defineComponent+setup，推荐抽成组合式函数：useBem('my-button', { type, size, loading })，内部自动处理__和--拼接
用 v-bind 动态生成 modifier 名称
BEM 的 --modifier 往往取决于多个状态组合（比如 isDisabled && isLoading），手动列所有分支易漏。用 v-bind 的对象语法配合动态 key 更可控。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 不要这样写：
:class="{'my-input--error': hasError, 'my-input--disabled': isDisabled, 'my-input--error--disabled': hasError && isDisabled}" - 改成：
:class="bemClasses"，其中bemClasses是响应式对象，key 由computed拼出：`my-input--${status}`，status可为'error'、'disabled'、'error-disabled' - 注意：动态 key 在 Vue3 中必须用方括号语法：
:class="{ [`my-input--${status}`]: true }"，否则不会响应更新
与
在 <style scoped> 下，BEM 类名会被自动加 data 属性 hash，但 v-bind:class 绑定的类名不会被处理 —— 这会导致样式失效或意外全局污染。
立即学习“前端免费学习笔记（深入）”；
- 如果用了
<style scoped>，就别在v-bind:class里传入未声明的 BEM 类名；所有动态类必须提前在 style 中显式写出，哪怕只是空规则：.my-card__header--sticky {} - 更稳妥的做法是搭配
module模式：<style module>，然后在 script 中用styles['my-card__header']引用，再通过v-bind:class绑定，完全规避命名冲突 - 切忌混用：
class="my-card"（scoped 生效） +:class="['my-card__body']"（无声明，scoped 不处理） → 后者样式丢失
真正卡住人的往往不是 BEM 规则本身，而是 class 名在模板、script、style 三端没对齐 —— 尤其当 modifier 由多个响应式变量组合生成时，漏掉一个分支或拼错一个连字符，样式就静默失效了。动手前先想清楚：这个 class 是谁定义的？在哪消费的？有没有被 scoped 截断？
