在 Vue.js 中使用 ::v-deep 、 /deep/还是:deep()呢？

现在2024年了，关于Vue的深度选择器（样式穿透，不知道谁创造的词）的使用建议该更新了。

现在（2024年2月），Vue官方唯一（个人在官网找到的）提到深度选择器的地址：单文件组件 CSS 功能——深度选择器 | Vue.js

使用建议

1. vue2:

• 使用 ::v-deep

2. vue3:

• 使用 :deep()

以上使用建议，参考css - How do I use /deep/ or >>> or ::v-deep in Vue.js? - Stack Overflow：

stack overflow的回答

stack overflow的一个用户的回答，翻译后，如下：

在 Vue 2 中：

• 该/deep/语法已被弃用
• ::v-deep与 Sass 一起使用，>>>不与 Sass 一起使用

在 Vue 3 中：

• ::v-deep .child-class已被弃用，有利于:deep(.child-class)
• 该::v-前缀已被弃用，取而代之的是:
• 该>>>语法已被弃用
• 该/deep/语法已被弃用
• 有新的选择器:slotted和:global

对于每个版本/语法，<style>该组件的标签必须是scoped：

<style scoped>

参考文献

单文件组件 CSS 功能——深度选择器 | Vue.js

css - How do I use /deep/ or >>> or ::v-deep in Vue.js? - Stack Overflow