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

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

  2. Vue 3 的语法调整

    在 Vue 3 中,官方明确推荐使用 ::v-deep 替代 /deep/,因为 ::v-deep 是 Vue 框架定义的标准化深度选择器语法,兼容性更好,且在单文件组件(SFC)中更符合规范。

  3. CSS 原生穿透方案的兴起

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

替代方案推荐

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

  1. 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 {
     /* 样式内容 */
   }
相关推荐
带娃的IT创业者33 分钟前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰1 小时前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost2 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11062 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白2 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学3 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽3 小时前
【初学】调试 MCP Server
前端·mcp
新元代码3 小时前
Node.js 完全安装与使用指南:Windows 平台详细教程
windows·node.js
四月_h3 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate3 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端