Vue 3 中的 deep 选择器的原理

在 Vue 3 中，deep 选择器用于在组件的样式中选择子组件的元素。它的原理是通过将选择器的深度扩展为所有子组件，并将其添加到选择器中。

具体来说，当使用 deep 选择器时，Vue 会在编译模板时，将该选择器深度扩展到每个子组件的样式中。这意味着使用 deep 选择器的样式将被应用到每个子组件上。

例如，如果有一个父组件和一个子组件，父组件的样式中使用了 deep 选择器：

.parent /deep/ .child {
  color: red;
}

在编译后，将生成以下样式：

.parent .child {
  color: red;
}
.parent .child .child {
  color: red;
}
.parent .child .child .child {
  color: red;
}

这样，父组件的样式将被应用到每个子组件上。注意，子组件的样式不会被应用到父组件上，只有父组件的样式会被应用到子组件中。

需要注意的是，deep 选择器是一个过渡语法，Vue 3 推荐使用 ::v-deep 代替。使用 ::v-deep 的原理与 deep 选择器相同，只是语法不同。

总之，deep 选择器通过将选择器的深度扩展到每个子组件的样式中，实现了父组件样式对子组件的影响。