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-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章