Vue的scoped原理是什么

Vue中的scoped是一种基于属性选择器的样式隔离方案，通过给组件生成唯一的属性选择器来实现样式隔离。

当在<style>标签上添加scoped属性时，Vue会为该组件的每个元素添加一个唯一的data-v-xxxx属性，并将样式规则中的选择器修改为包含该属性[data-v-xxxx]的形式。

生成唯一属性：xxxx 是一个基于组件文件路径和内容的哈希值，确保唯一性。

假设有以下组件：

<template>
  <div class="example">Hello World</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

编译后生成的样式和模板如下：

<div class="example" data-v-f3f3eg9>Hello World</div>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

scoped的优点

样式隔离：scoped可以有效地防止组件间的样式冲突，确保每个组件的样式都是独立的。
提高可维护性：由于样式被限制在组件内部，因此当需要修改或调试样式时，可以更容易地定位到相关的组件和样式。

补充

在某些情况下，你可能需要为scoped样式添加一个全局样式或修改子组件的样式。这时可以使用深度选择器（如Vue 3中的::v-deep或Vue 2中的/deep/、>>>）来“穿透”scoped限制。但需要注意的是，过度使用深度选择器可能会破坏样式的隔离性。

在 Vue 中，::v-deep 是一个用于穿透组件样式作用域的深度选择器，主要用于在父组件中修改子组件的样式。

使用方法

基本用法

在父组件的 <style scoped>中，使用 ::v-deep 可以选择子组件中的元素并应用样式：

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

<style scoped>
.parent ::v-deep .child-class {
  color: red;
}
</style>

在这个例子中，.child-class 是子组件中的一个类，通过 ::v-deep，父组件的样式可以穿透到子组件中。

与伪类和伪元素结合使用

::v-deep 可以与伪类和伪元素结合使用，但需要注意其位置：

<style scoped>
.parent ::v-deep .child-class:hover {
  color: blue;
}
</style>

嵌套使用

如果需要对更深层次的嵌套元素应用样式，可以多次使用 ::v-deep：

<style scoped>
.parent ::v-deep .child-class ::v-deep .grandchild-class {
  color: green;
}
</style>

使用场景

在需要修改第三方组件的样式时，::v-deep 是一种方便的解决方案。