摘要

在 Vue 2 中，/deep/、::v-deep、::v-deep() 和 :deep() 都是用于深度选择器的功能，它们的作用是穿透组件的封装，允许样式影响子组件的内部样式。

在Vue项目中，尤其是在使用组件化开发时，我们某些时候需要对组件内部的某些样式优化，但Vue的样式封装特性（scoped）会阻止外部样式直接作用于组件内部。

1./deep/

/deep/ 是 Vue 2.x 中使用的深度选择器，它用于穿透组件的样式封装。可以在 scoped 样式中使用它来定义全局样式影响组件的内部元素。

用法示例：

/* scoped style 中使用 /deep/ */
::v-deep .child-element {
  color: red;
} 

注意：/deep/ 是一个已弃用的功能，它的语法已经被 Vue 3 中的 ::v-deep 取代，但仍然在 Vue 2 中有效。

2. ::v-deep

::v-deep 是 Vue 2 和 Vue 3 推荐的深度选择器，它与 /deep/ 的功能相同，但是它的语法更加明确。::v-deep 可以用于 scoped 样式中，允许你选择子组件的深层次元素。

用法示例：

/* scoped style 中使用 ::v-deep */
::v-deep .child-element {
  color: red;
}

3. ::v-deep()

::v-deep() 是 Vue 2 和 Vue 3 中深度选择器的另一种写法，它在功能上与 ::v-deep 相同，区别只是语法的不同形式。::v-deep() 允许你传入一个函数体，在某些场景下，它可能更具表现力。

用法示例：

/* scoped style 中使用 ::v-deep() */
::v-deep(.child-element) {
  color: red;
}

4. :deep()

:deep() 是 Vue 3 中的语法，在 Vue 2 中并没有这个写法。它通常用于处理动态或有条件的深度样式选择器，并且比 ::v-deep 更灵活。

在Vue3中的用法

/* scoped style 中使用 :deep() */
:deep(.child-element) {
  color: red;
}

总结：

• 在 Vue 2 中，使用 /deep/ 或 ::v-deep 来深度选择子组件的样式。
• 在 Vue 3 中，推荐使用 ::v-deep 或 :deep()，其中 ::v-deep() 是标准的深度选择器，:deep() 提供了更灵活的动态选择功能。
• /deep/ 在 Vue 3 中已被弃用。

这些选择器主要用于样式穿透，允许你在 scoped 样式中修改组件中的样式