Vue3 中 scoped deep 该如何正确使用？

在 Vue3 的开发过程中，很多开发者会遇到样式作用域相关的问题，scoped deep 的使用是一个较为关键的点，我们将以问答的形式深入探讨 Vue3 中 scoped deep 的正确使用方法。

什么是 Vue3 中的 scoped？

在 Vue 组件中，当 <style> 标签加上 scoped 属性时，它表示该样式只作用于当前组件，这是通过在 DOM 元素上添加一个独一无二的属性（data-v-xxxxxx），然后在 CSS 选择器上也添加这个属性来实现样式的局部作用域。

<template>
  <div class="container">
    <p>这是组件内的内容</p>
  </div>
</template>
<style scoped>
.container {
  background-color: lightblue;
}
</style>

这样设置后,.container 的样式只会应用到当前组件内的 div 元素上，不会影响到其他组件。

为什么会需要 scoped deep？

虽然 scoped 确保了样式的局部性，但有时我们希望样式能够“穿透”到子组件内部，我们在父组件中有一个样式，希望它能够应用到子组件的某个元素上，而子组件也有自己的 scoped 样式，如果不使用特殊方法，父组件的样式是无法直接作用到子组件内部元素的，这时候，scoped deep 就派上用场了。

Vue3 中 scoped deep 有哪些写法？

在 Vue3 中，scoped deep 有以下几种常见写法：

• 使用 /deep/ 或 ::v-deep：这两个实际上是等效的，假设我们有一个父组件和一个子组件，子组件中有一个类名为 .child - class 的元素，我们希望在父组件中给这个子组件的元素设置样式：

  <!-- 父组件 -->
  <template>
  <div class="parent - container">
   <ChildComponent />
  </div>
  </template>

``` ```html ``` 这里通过 `/deep/` 或者 `::v-deep` 就可以让父组件的样式作用到子组件内部的 `.child - class` 元素上。 - **使用 `:deep()`**：这是 Vue3 官方推荐的新语法。 ```html ``` 这种写法更加直观和简洁，同时也符合 CSS 未来的发展趋势。

在使用 scoped deep 时，有没有什么注意事项？

• 性能问题：使用 scoped deep 会增加样式选择器的复杂度，可能会对性能产生一定影响，尤其是在应用中大量使用时，浏览器解析样式的时间会增加，尽量避免在性能敏感的区域过度使用 scoped deep。
• 层级问题：如果子组件嵌套层次过深，使用 scoped deep 可能会导致样式的不确定性，多层子组件中都有相同类名的元素，可能会导致父组件的样式作用到不期望的元素上，所以在设计组件结构和类名时，要尽量保证唯一性。
• 兼容性问题：虽然 ::v-deep 和 /deep/ 在大多数现代浏览器中都能很好地工作，但 :deep() 是 Vue3 新推出的语法，对于一些老旧浏览器可能不支持，如果项目需要兼容老旧浏览器，可能还需要继续使用 ::v-deep 或 /deep/ 这种向后兼容的写法。

在单文件组件（SFC）中，scoped deep 与其他样式设置方式如何共存？

在单文件组件中,除了使用 scoped deep 来设置穿透样式，还可能会有全局样式、模块样式等。

• 全局样式：全局样式可以在 main.js 中通过 import 引入一个全局的 CSS 文件，或者在 <style> 标签中不添加 scoped 属性，全局样式会应用到整个应用中，它的优先级低于 scoped 样式，但高于 scoped deep 样式。

  <!-- main.js -->
  import './styles/global.css';

  /* global.css */
  body {
  font - family: Arial, sans - serif;
  }

  <template>
  <div class="container">
   <p>组件内容</p>
  </div>
  </template>

``` 这里 `global.css` 中的样式会应用到整个页面，但如果 `scoped` 样式中有相同选择器，会覆盖全局样式，而 `scoped deep` 样式如果和全局样式冲突，全局样式优先级更低。 - **模块样式**：在 Vue 中，可以使用 `css - module` 来实现更细粒度的样式控制，`css - module` 通过给类名添加哈希值来确保唯一性，当 `css - module` 与 `scoped deep` 共存时，它们的作用域规则不同，`css - module` 的样式不会受到 `scoped deep` 的影响，反之亦然。 ```html ``` 这里 `css - module` 的样式只作用于通过 `$style` 绑定的元素，而 `scoped deep` 样式作用于子组件内特定元素，两者互不干扰。

如何在 Vue3 的动态组件中使用 scoped deep？

在 Vue3 中使用动态组件时，同样可以使用 scoped deep 来设置样式。

<template>
  <div class="parent - wrapper">
    <component :is="currentComponent"></component>
  </div>
</template>
<style scoped>
.parent - wrapper :deep(.dynamic - component - class) {
  background - color: yellow;
}
</style>

import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      currentComponent: 'DynamicChildComponent'
    };
  }
});

<!-- DynamicChildComponent.vue -->
<template>
  <div>
    <p class="dynamic - component - class">动态子组件内容</p>
  </div>
</template>
<style scoped>
/* 子组件自身样式 */
</style>

这样父组件的样式就能通过 scoped deep 作用到动态加载的子组件内部元素上。

在使用预处理器（如 Sass、Less）时，scoped deep 有什么特别之处？

当使用 Sass 或 Less 等预处理器时，scoped deep 的基本原理不变，但语法上可能会有一些差异。

• Sass：在 Sass 中，::v-deep、/deep/ 和 :deep() 都可以正常使用。

  <template>
  <div class="parent - sass">
   <ChildComponent />
  </div>
  </template>

``` 这里通过在 Sass 中嵌套使用 `::v-deep`，可以让样式穿透到子组件。 - **Less**：在 Less 中，同样支持这些语法。 ```html ``` 不过需要注意的是，不同预处理器在处理选择器优先级和嵌套规则上可能有细微差别，开发者需要根据实际情况进行调整。

如何调试 scoped deep 样式？

在调试 scoped deep 样式时，可以通过以下几种方法：

• 浏览器开发者工具：使用浏览器的开发者工具，如 Chrome DevTools，在 Elements 面板中，可以查看元素的样式应用情况，当使用 scoped deep 时，注意观察选择器的生成和应用，如果样式没有按照预期生效，可以检查选择器是否正确匹配，以及是否存在样式冲突，如果有多个样式规则同时作用于一个元素，检查它们的优先级。
• 添加调试样式：在 scoped deep 的样式规则中添加一些明显的调试样式，如 border: 2px solid red，这样可以直观地看到样式是否应用到了期望的元素上，如果没有看到这个调试样式，说明样式可能没有正确生效，需要进一步排查原因。
• 检查组件结构：确保子组件的结构和类名与 scoped deep 样式中的选择器相匹配，如果子组件结构发生变化，可能会导致样式无法正确应用，子组件中类名的拼写错误或者元素层级的改变都可能影响样式的穿透。

通过以上对 Vue3 中 scoped deep 的详细问答，相信开发者们能够更加准确、高效地使用它来解决样式作用域相关的问题，打造出更加美观且易于维护的 Vue 应用，在实际开发中，要根据项目的具体需求和特点，合理运用这些知识，以达到最佳的开发效果。