10分钟了解Vue的深度选择器
2024-11-19 01:11:41 #面试 #vue2 #vue3

本文算是转载文章，本来打算自己写的，但是发现别人写的比自己号多了，还很完成。

正文

毕竟是转载他人的文章，这里留一下他的微信公众号：前端历险记。

整理了很多面试相关的文章，很不错。

深度选择器

在Vue.js项目中，尤其是在使用组件化开发时，我们时常需要修改组件内部的样式，但Vue的样式封装特性（如<style scoped>）会阻止外部样式直接作用于组件内部。为了应对这一挑战，Vue社区引入了深度选择器（也称为穿透选择器或阴影穿透选择器），让我们能够跨越组件的封装边界，对内部元素进行样式定制。

本文将详细探讨/deep/、>>>、::v-deep以及Vue 3 Composition API中的v-deep()的区别与使用方法。

概述

深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。

区别

/deep/
  • Vue 2.x中的用法：/deep/是Vue 2.x中用于穿透组件样式封装的一种方式，类似于Sass的/deep/或/deep/的别名::v-deep（但Vue 2.x官方文档中并未直接提及::v-deep）。
  • 兼容性：支持CSS预处理器（如Sass、Less）和CSS原生样式。
  • 注意：在Vue 3.x中，/deep/不再被官方直接支持，虽然一些构建工具或库可能仍然兼容，但推荐使用::v-deep。
>>>
  • CSS原生语法：>>>是CSS原生中的深度选择器语法，用于穿透样式封装。但在Vue单文件组件（.vue）中，它并不总是被直接支持，因为Vue会将其视为普通CSS选择器的一部分。
  • 兼容性：仅在某些特定环境（如Webpack的css-loader配置中）和原生CSS中有效，Vue单文件组件中通常需要特定配置才能使用。
  • 注意：在Vue 3.x中，>>>同样不再被推荐使用，应使用::v-deep。
::v-deep
  • Vue 3.x中的推荐用法：::v-deep是Vue 3.x中引入的官方深度选择器，用于替代Vue 2.x中的/deep/和原生CSS中的>>>。
  • 兼容性：支持CSS预处理器和CSS原生样式，是Vue 3.x中推荐使用的深度选择器。
  • 优点：与Vue 3的其他新特性相兼容，提供了更好的开发体验。

v-deep()

（Vue 3 Composition API）

  • 特殊用法：在Vue 3的Composition API中，可以通过v-deep()函数在<style>标签中动态应用深度选择器。这不是CSS语法的一部分，而是Vue 3特有的模板编译特性。

  • 用法：通常在<style>标签的scoped属性下，结合v-bind:class或v-bind:style在模板中动态绑定样式时使用。

  • 示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <template>
      <div :class="{'custom-class': true}">
        <ChildComponent />
      </div>
    </template>

    <script setup>
    // Composition API 逻辑
    </script>

    <style scoped>
    .custom-class::v-deep(.child-class) {
      /* 样式规则 */
    }
    /* 或者使用v-deep()函数（虽然不直接在<style>中，但说明其概念） */
    /* 注意：实际中v-deep()不直接用于<style>标签内，而是可能通过其他方式结合Composition API使用 */
    </style>

    注意：上面的v-deep()示例主要是为了说明概念，实际上在<style>标签内直接使用v-deep()函数是不支持的。在Composition API中，v-deep()通常与动态样式绑定结合使用，但这更多是在JavaScript层面而非CSS层面。

使用

Vue 2.x
1
2
3
4
5
<style scoped>
.parent /deep/ .child {
  /* 样式规则 */
}
</style>

或者使用>>>（需要配置支持）：

1
2
3
4
5
<style scoped>
.parent >>> .child {
  /* 样式规则 */
}
</style>
Vue 3.x

在Vue 3.x中，推荐使用::v-deep作为深度选择器，因为它既清晰又符合Vue的官方规范。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<script setup>
// Composition API 逻辑
</script>

<style scoped>
.parent::v-deep .child-class {
  /* 样式规则，这些规则将穿透到ChildComponent内部，并应用于具有.child-class类的元素 */
  color: blue;
  font-weight: bold;
}
</style>

在上述例子中，.parent::v-deep .child-class选择器将确保.child-class的样式被应用到<ChildComponent />内部的任何匹配元素上，即使这些元素被<ChildComponent />的<style scoped>封装所包围。

注意

关于v-deep()在Composition API中的特殊说明:

需要注意的是，v-deep()并不是一个在<style>标签内直接使用的CSS选择器或函数。相反，它的概念更多地与Vue 3的Composition API和动态样式绑定相关。

然而，Vue官方并没有直接提供一个名为v-deep()的函数用于在Composition API中处理样式穿透。

在Composition API中处理样式穿透时，你通常会继续使用::v-deep选择器，但可能会通过JavaScript逻辑来动态绑定类名或样式，而不是直接使用一个名为v-deep()的函数。

例如，你可以使用v-bind:class或v-bind:style来根据组件的状态动态地添加或移除样式类。

结论

  • /deep/和>>>在Vue 2.x中用于穿透样式封装，但在Vue 3.x中不再推荐使用。
  • ::v-deep是Vue 3.x中推荐的深度选择器，用于穿透组件的样式封装。
  • v-deep()并不是Vue官方提供的一个函数，用于在<style>标签内或Composition API中直接处理样式穿透。相反，你应该使用::v-deep选择器，并结合Vue的模板和Composition API功能来实现动态样式绑定。

通过正确理解和使用这些深度选择器，你可以更有效地在Vue项目中定制组件样式，而无需修改第三方组件的源代码。

结语

本来想自己整理一下Vue的深度选择器这块的内容，没想到有人整理的如此详细。

我对比了官网文档大致看了一下，整理的很好，于是这里就直接收录（化身懒狗）。

参考

深度选择器探秘：/deep/、>>>、::v-deep 与 v-deep() 的区别与用法 (qq.com)

单文件组件 CSS 功能 | Vue.js (vuejs.org)

Prev
2024-11-19 01:11:41 #面试 #vue2 #vue3
Next