面试题：在 Vue 项目中的 style 样式中，为什么要添加 scoped？

在 Vue 项目中，<style> 标签中的 scoped 属性用于限定样式的作用域，确保样式只对当前组件生效，避免样式污染全局样式或其他组件的样式。以下是使用 scoped 的原因和具体作用：

1. 避免样式污染

在 Vue 项目中，如果没有使用 scoped，组件的样式会全局生效，可能导致不同组件之间的样式冲突。

示例：

<!-- 组件 A -->
<template>
  <div class="container">Component A</div>
</template>

<style>
.container {
  color: red;
}
</style>

<!-- 组件 B -->
<template>
  <div class="container">Component B</div>
</template>

<style>
.container {
  color: blue;
}
</style>

问题：

组件 A 和组件 B 的 .container 样式会相互覆盖，导致样式冲突。

解决方案：

使用 scoped 限定样式作用域。

<!-- 组件 A -->
<template>
  <div class="container">Component A</div>
</template>

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

<!-- 组件 B -->
<template>
  <div class="container">Component B</div>
</template>

<style scoped>
.container {
  color: blue;
}
</style>

结果：

组件 A 和组件 B 的 .container 样式互不干扰。

2. 实现样式模块化

scoped 通过为组件的 HTML 元素添加唯一的属性（如 data-v-xxxxxx），并将样式与这些属性绑定，实现样式的模块化。

编译后的效果：

<template>
  <div class="container" data-v-f3f3eg9>Component A</div>
</template>

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

说明：

Vue 会自动为组件的 HTML 元素添加唯一的属性（如 data-v-f3f3eg9），并将样式与这些属性绑定。
这样，样式只会对当前组件的元素生效。

3. 提高代码可维护性

使用 scoped 可以使样式与组件紧密关联，避免全局样式的混乱，提高代码的可维护性。

优点：

组件的样式只对当前组件生效，便于理解和维护。
减少全局样式的使用，降低样式冲突的风险。

4. 支持深度选择器

在某些情况下，可能需要修改子组件的样式。使用 scoped 时，可以通过深度选择器（>>> 或 /deep/ 或 ::v-deep）来实现。

示例：

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

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

说明：

深度选择器允许 scoped 样式穿透到子组件中。

5. 注意事项

性能影响：scoped 会为每个组件生成唯一的属性，并重新编译样式，可能会稍微增加打包后的文件大小。
全局样式：如果需要定义全局样式，可以在 App.vue 或单独的全局样式文件中定义，不要使用 scoped。

总结

使用 scoped 的主要目的是：

避免样式污染：确保样式只对当前组件生效。
实现样式模块化：通过唯一的属性绑定样式，实现样式的模块化。
提高代码可维护性：使样式与组件紧密关联，便于维护。
支持深度选择器：允许修改子组件的样式。

在 Vue 项目中，推荐为组件的样式添加 scoped，以确保样式的独立性和可维护性。

THE END

Vue 进阶面试题