Vue3 中 deep true 的用法及原理是什么？

提问者：Terry2025.04.18浏览：67

vue3 问答

在 Vue3 的开发过程中，很多开发者会遇到样式穿透的需求，而“deep true”正是解决这一问题的关键，我们将详细探讨 Vue3 中 deep true 的用法及原理。

什么是样式穿透？为什么需要它？

在 Vue 组件化开发中，每个组件都有自己的作用域，这意味着组件内部定义的样式默认不会影响到其他组件，同样，外部样式也不会轻易影响到组件内部，这种样式隔离机制有助于保持组件的独立性和可维护性，但有时我们确实需要打破这种隔离，让父组件的样式能够影响到子组件内部的特定元素，这就是样式穿透要解决的问题。

在一个复杂的项目中,我们可能使用了第三方 UI 组件库，这些组件的样式有时不符合我们项目的整体风格，我们希望能够在不修改组件库源码的情况下，对其内部某些元素的样式进行调整，这时就需要样式穿透。

Vue3 中 deep true 是如何实现样式穿透的？

在 Vue3 中，当我们使用 scoped 样式时（即在 style 标签上添加 scoped 属性），组件的样式会被限制在该组件内部，而要实现样式穿透，可以使用“deep”操作符，并且在一些场景下需要配合“true”。

具体的语法形式如下：

/* 在父组件的样式中 */
.parent >>>.child {
  color: red;
}

在 Vue3 中，除了上述“>>>"的写法，还可以使用“::v-deep”，

.parent::v-deep.child {
  color: red;
}

当我们使用“::v-deep”时，在某些情况下，比如使用预处理器（如 Sass、Less 等）时，可能会遇到一些解析问题，这时可以通过设置“deep true”来解决，在 Vue CLI 项目中，可以在相关的配置文件（如 vue.config.js）中进行如下设置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
        additionalData: (content, loaderContext) => {
          if (!loaderContext.resourcePath.match(/\.vue$/)) {
            return content;
          }
          return `
          @import "@/styles/variables.scss";
          ${content}
          `;
        },
        // 这里设置 deep true
        implementation: require('sass'),
        sassOptions: {
          indentedSyntax: true,
          additionalData: function (content, loaderContext) {
            return `@import "~@/styles/main.scss";${content}`;
          },
          // deep true 配置
          prependData: `@import "~@/styles/main.scss";`
        }
      }
    }
  }
};

通过这样的设置,就可以确保在使用预处理器时，“::v-deep”能够正确地进行样式穿透。

deep true 的原理是什么？

从原理上来说,当我们使用 scoped 样式时，Vue 会为组件中的每个元素添加一个独一无二的动态属性，data-v-xxxxxx”，这个属性值是基于组件的哈希值生成的，在样式中，每个选择器都会带上这个属性，以确保样式只应用于该组件内部的元素。

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>
<style scoped>
.parent[data-v-123456] {
  background-color: lightblue;
}
.child[data-v-123456] {
  color: green;
}
</style>

而“::v-deep”操作符的作用是，它会告诉 Vue 的样式编译器，忽略子组件的 scoped 样式隔离，直接将样式应用到匹配的子组件内部元素上，当我们配合“deep true”在相关配置中进行设置时，实际上是在告诉预处理器（如 Sass、Less）也要正确地处理这种穿透的样式规则，确保在编译过程中，样式能够按照我们期望的方式应用到子组件内部元素，而不会因为预处理器的解析规则而出现问题。

在实际项目中，使用 deep true 有哪些注意事项？

性能影响：虽然样式穿透很方便，但过度使用可能会对性能产生一定影响，因为当使用“::v-deep”进行样式穿透时，样式的作用范围不再局限于单个组件，可能会影响到更多的元素，这会增加浏览器计算样式的工作量，在使用时应尽量精确选择需要穿透样式的元素，避免全局范围的样式穿透。
维护性：过多的样式穿透可能会使组件之间的样式关系变得复杂，降低代码的可维护性，在团队开发中，其他开发者可能难以理解为什么某个子组件的样式会被父组件以这种方式修改，在使用样式穿透时，应添加必要的注释，说明穿透的目的和影响范围。
兼容性：尽管“::v-deep”是 Vue3 推荐的样式穿透方式，但不同的浏览器和工具对其支持可能存在差异，在使用预处理器配合“deep true”时，也需要注意不同版本的预处理器对相关配置的兼容性，在项目开发过程中，应进行充分的测试，确保在各种目标环境下样式穿透都能正常工作。
与组件库的结合：当使用第三方组件库时，使用样式穿透修改组件库内部样式可能会导致与组件库的升级不兼容，如果组件库在后续版本中修改了内部元素的结构或类名，可能会使我们通过样式穿透设置的样式失效，在使用样式穿透修改组件库样式时，要关注组件库的更新日志，以便及时调整样式。

有没有替代 deep true 实现样式穿透的方法？

使用 CSS 变量：可以在父组件中定义 CSS 变量，然后在子组件中使用这些变量。
```

<template>
<div class="parent">
 <ChildComponent />
</div>
</template>
```

``` 通过这种方式，父组件可以通过定义变量来影响子组件的样式，而不需要直接穿透样式。 2. **通过 props 传递样式**：在父组件中，将需要的样式以 props 的形式传递给子组件，子组件根据接收到的 props 来设置自身的样式。 ```html ``` 这种方法使得样式的传递更加明确，也便于维护和理解。

Vue3 中的“deep true”为我们提供了一种强大的样式穿透解决方案，能够在保持组件样式隔离的同时，满足我们对特定子组件内部元素进行样式调整的需求，理解其用法和原理，以及在实际项目中的注意事项，可以帮助我们更高效地开发出样式优美、易于维护的 Vue 应用，我们也可以结合 CSS 变量、props 传递样式等其他方法，灵活地处理组件间的样式关系，避免过度依赖样式穿透带来的潜在问题，在实际开发中，应根据项目的具体情况，选择最合适的方式来实现样式的控制和管理，以提升用户体验和项目的整体质量，无论是在小型项目还是大型企业级应用中，正确运用这些技巧都能使我们的开发工作更加顺畅和高效。

赏您的支持是我们创作的动力！