Vue2 中 deep() 该如何理解与使用？

在 Vue2 的开发过程中，deep() 是一个在样式穿透方面较为重要的概念，很多开发者在处理组件样式时，会遇到样式无法按照预期应用到子组件内部元素的情况，而 deep() 可以在一定程度上解决这类问题，我们通过一系列问答，深入探讨 Vue2 中 deep() 的相关知识。

什么是 Vue2 中的 deep() ？

deep() 主要用于 Vue2 单文件组件（SFC）中，当使用 scoped 样式时，它提供了一种方式来让父组件的样式能够影响到子组件内部的元素，在默认情况下，当组件的样式设置为 scoped 时，该组件的样式只会作用于当前组件的模板内的元素，不会影响到子组件，而 deep() 就像是一把“钥匙”，打破了这种隔离，使得样式能够“穿透”到子组件内部。

我们有一个父组件 Parent.vue 和一个子组件 Child.vue ，在 Parent.vue 中，我们定义了如下样式：

<template>
  <div class="parent">
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  components: {
    Child
  }
}
</script>
<style scoped>
.parent {
  background-color: lightblue;
}
</style>

在 Child.vue 中：

<template>
  <div class="child">
    这是子组件内容
  </div>
</template>
<script>
export default {
  name: 'Child'
}
</script>
<style scoped>
.child {
  background-color: lightgreen;
}
</style>

.parent 的样式只会作用于父组件的 div 元素，不会影响到子组件的 .child 元素，但如果我们想让父组件的样式影响子组件，就可以使用 deep() 。

deep() 具体该如何使用？

在 Vue2 中，使用 deep() 有几种不同的写法，一种常见的写法是使用 /deep/ 操作符，我们在 Parent.vue 中想要改变子组件 Child.vue 内部 .child 元素的文本颜色，可以这样写：

<template>
  <div class="parent">
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  components: {
    Child
  }
}
</script>
<style scoped>
.parent /deep/ .child {
  color: red;
}
</style>

这样,子组件中 .child 元素的文本颜色就会变成红色，还可以使用 ::v-deep 这种写法，效果是一样的：

<template>
  <div class="parent">
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  components: {
    Child
  }
}
</script>
<style scoped>
.parent ::v-deep .child {
  color: red;
}
</style>

::v-deep 这种写法是官方推荐的，因为它在一些工具（如 PostCSS）中更容易被识别和处理。

deep() 适用哪些场景？

• 第三方 UI 组件库样式定制：在使用像 Element UI、Vuetify 等第三方 UI 组件库时，我们经常需要对组件的默认样式进行修改，这些组件通常作为子组件被引入到我们的项目中，由于它们自身有独立的样式作用域，我们可以使用 deep() 来穿透到这些组件内部，修改其样式，在使用 Element UI 的按钮组件时，我们想改变按钮的背景颜色：

  <template>
  <div class="custom-container">
    <el-button>默认按钮</el-button>
  </div>
  </template>

``` 这样，在 `custom-container` 内的 Element UI 按钮的背景颜色就被修改为橙色了。 - **多层嵌套子组件样式调整**：当组件存在多层嵌套时，`Parent -> Child -> GrandChild` 这样的结构，如果我们在 `Parent.vue` 中想要直接影响 `GrandChild.vue` 中的元素样式，就可以使用 deep() ，假设 `GrandChild.vue` 中有一个类名为 `.grand - child - text` 的元素： ```html

``` ```html

``` ```html

``` 通过这种方式，我们就可以在父组件中直接调整多层嵌套子组件内部元素的样式。

deep() 有什么局限性？

• 性能问题：使用 deep() 会打破样式的作用域隔离，使得样式规则的匹配范围变大，当项目规模较大时，这可能会导致浏览器在解析和渲染样式时花费更多的时间，从而影响性能，如果一个页面中有大量使用 deep() 穿透的样式规则，浏览器需要遍历更多的 DOM 元素来确定哪些元素应用这些样式，这会增加渲染的开销。

• 维护性问题：由于 deep() 让样式穿透到子组件，这可能会导致样式的来源不清晰，在多人协作开发的项目中，其他开发者可能很难快速确定某个子组件内部元素的样式是在哪里定义的，一个子组件的样式突然发生了变化，开发者需要在父组件甚至更上层的组件样式中去查找使用 deep() 的地方，这增加了代码维护的难度。

• 兼容性问题：虽然大多数现代浏览器都支持 deep() 的相关写法，但在一些老旧浏览器中可能存在兼容性问题，在某些版本较低的 Safari 浏览器中，::v-deep 的写法可能不被识别，导致样式无法正确应用，在使用 deep() 时，需要考虑项目所面向的用户群体中是否可能存在使用老旧浏览器的情况，如果有，就需要采取一些兼容性处理措施。

如何避免过度使用 deep() 带来的问题？

• 使用 CSS 变量：可以通过 CSS 变量来实现一些样式的统一调整，而不需要过度依赖 deep() ，我们可以在根组件中定义一些颜色变量：

  <template>
  <div id="app">
    <Child />
  </div>
  </template>

``` 然后在子组件中使用这些变量： ```html

``` 这样，通过修改根组件中的变量值，就可以统一修改相关样式，而且不会破坏样式的作用域隔离。 - **通过 props 传递样式相关数据**：可以在父组件中通过 props 向子组件传递一些样式相关的数据，让子组件根据这些数据来应用自身的样式，在父组件 `Parent.vue` 中： ```html

``` 在子组件 `Child.vue` 中： ```html

``` 这种方式使得样式的控制更加清晰，也不会破坏样式的作用域隔离，同时提高了代码的可维护性。

deep() 在 Vue2 和 Vue3 中有什么区别？

在 Vue2 中，我们常用 /deep/ 或者 ::v-deep 来实现样式穿透，而在 Vue3 中，/deep/ 这种写法已经被废弃，推荐使用 ::v-deep ，虽然在 Vue3 中 ::v-deep 的基本功能和 Vue2 中类似，但在一些底层实现和工具支持上有所不同，Vue3 在处理单文件组件样式时，对 ::v-deep 的解析和处理更加优化，与现代 CSS 工具（如 PostCSS）的集成更好，Vue3 在组件的封装和样式隔离方面有一些改进，使得在使用 ::v-deep 时对性能的影响相对 Vue2 来说有所降低，无论是 Vue2 还是 Vue3 ，使用 ::v-deep 都需要谨慎，因为它依然打破了组件样式的默认隔离机制，可能会带来一些维护和性能上的问题。

Vue2 中的 deep() 是一个在处理组件样式穿透时非常有用的特性，但开发者需要充分了解其使用方法、适用场景、局限性以及如何避免相关问题，以便在项目开发中能够合理、高效地使用它，构建出样式清晰、性能良好的 Vue 应用程序。