Vue3中 :deep() 与 :deep 用法区别解析

在 Vue 3 的 Scoped CSS 中，:deep() 用于穿透样式作用域（样式穿透），其括号的使用有明确区别：

1. 有括号：:deep(selector)（推荐写法）

css

复制

下载

:deep(.child-class) { 
  color: red;
}

• ✅ 正确用法：将需要穿透的选择器放入括号内

• ✅ 编译后生成类似 [data-v-xxx] .child-class 的选择器

• ✅ Vue 3.3+ 官方推荐写法（无括号写法已被标记为废弃）

2. 无括号：:deep selector（废弃写法）

css

复制

下载

:deep .child-class { 
  color: red;
}

• ⚠️ 已被废弃（Vue 3.3+ 会警告）

• ❌ 编译后生成 [data-v-xxx] .child-class（效果相同但语法不标准）

• ❌ 未来版本可能被移除

3. ⚠️ 历史写法：::v-deep（Vue 2 兼容）

css

复制

下载

/* Vue 2 方式 (已废弃) */
::v-deep .el-dialog__body {
  padding: 15px;
}

• 在 Vue 3 中仍可用但已被标记为废弃

• 推荐迁移到 :deep() 语法

---

关键区别总结：

特性	:deep(selector)（有括号）	:deep selector（无括号）
语法正确性	✅ Vue 3.3+ 官方推荐	⚠️ 已被废弃（兼容旧项目）
编译结果	相同（[data-v-xxx] selector）	相同（但会触发警告）
未来兼容性	安全	可能在未来版本失效
代码规范	符合 CSS 伪类标准（如 :not()）	不符合标准伪类写法

---

正确用法示例：

vue

复制

下载

迁移建议：

• 新项目一律使用 :deep(selector)

• 旧项目升级 Vue 3.3+ 后，用 ESLint 的 vue/no-deprecated-deep-selector 规则自动替换无括号写法

 其他穿透语法：

• 插槽内容穿透 → :slotted(.slot-class)

• 全局样式 → :global(.global-class)