为什么 /deep/ 现在不推荐使用？

开发者小天2025-08-18 21:02

兼容性和标准化问题
/deep/ 是早期 Vue 项目中配合 scoped 样式使用的深度选择器，用于穿透组件的样式隔离（修改子组件或第三方组件的样式）。但它并非官方标准语法，而是某些预处理器（如 Less、Sass）和构建工具（如旧版 Webpack）的 "非标准实现"，在不同环境中可能存在解析问题。
Vue 3 的语法调整

在 Vue 3 中，官方明确推荐使用 ::v-deep 替代 /deep/，因为 ::v-deep 是 Vue 框架定义的标准化深度选择器语法，兼容性更好，且在单文件组件（SFC）中更符合规范。
CSS 原生穿透方案的兴起

随着 CSS 原生 :deep() 伪类的普及（属于 CSS 嵌套规范的一部分），现代项目更倾向于使用标准的 :deep() 替代非标准的 /deep/ 或 ::v-deep，因为它不依赖框架或预处理器，兼容性更广泛（现代浏览器和构建工具已普遍支持）。

替代方案推荐

如果要实现 "穿透 scoped 样式修改子组件样式"，现在更推荐的写法是：

Vue 3 及现代项目：使用 :deep()

这是 CSS 原生语法（需配合支持 CSS 嵌套的环境，如 PostCSS 或现代浏览器），也是 Vue 3 官方推荐的写法：

复制代码

   /* 无需 /deep/，直接使用 :deep() */
   :deep(.ant-modal-content) {
     height: 100%;
     .ant-modal-body {
       height: calc(100% - 55px);
     }
     .ant-modal-footer {
       display: none;
     }
   }

Vue 2 项目：使用 ::v-deep

若仍在维护 Vue 2 项目，::v-deep 是比 /deep/ 更规范的替代方案，兼容性更稳定：

less

复制代码

   ::v-deep .ant-modal-content {
     /* 样式内容 */
   }