为什么vue要用scoped

为什么 Vue 要用 scoped

在 Vue 的设计中，组件化是核心理念之一。使用 scoped 样式的主要原因是为了避免不同组件之间样式的冲突。特别是在大型应用程序中，多个组件可能共享相似的类名。如果没有隔离样式，某个组件的样式可能意外地影响到其他组件的表现，从而导致样式混乱和不可预期的行为。

原理：生成唯一选择器

当你在 Vue 组件中使用 scoped 样式时，Vue 会为每个 CSS 选择器自动添加一个唯一的标识符（例如 data-v-xxxxxxx）。这个标识符会被加到组件的根元素以及应用了该样式的元素上，以确保样式只在该组件内生效。

举个例子

假设有一个简单的 Vue 组件：

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

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

编译后，生成的 HTML 结构可能如下：

<div class="example" data-v-1234567>
  Hello, World!
</div>

在这个例子中，.example 的选择器变为 .example[data-v-1234567]，确保只有这个组件应用这个样式，而不会影响其他组件。

怎么修改第三方库的样式？

1. 直接修改全局样式：

   • 在 main.js 中引入 reset.css 的方式如下：

import './reset.css';

• • 通过直接修改全局样式文件（如 reset.css），所有组件都将受到影响。这种方法在小型项目中可能很方便，但在大型项目中使用时需谨慎。因为全局样式的修改可能导致样式冲突和意外的样式变化，进而影响应用的可维护性和可预测性。

  • 需要注意的是，如果一个组件的样式没有加上 scoped，那么这个组件的样式会作用于整个应用，成为全局样式。

• 在有 scoped 的组件样式中修改：

  • 如果你需要对子组件的样式进行修改，而该子组件的样式没有 scoped（相当于全局样式），则可以利用样式穿透（::v-deep）：

<template>
  <ChildComponent />
</template>
<style scoped>
::v-deep .child-class {
  color: red; /* 将影响到 ChildComponent 中 class 为 child-class 的元素 */
}
</style>

如果你在 Vue 组件中想对 Element UI 等第三方库的组件自定义样式：

1.举个修改失败的反例

<template>
  <el-button class="my-button">Click Me</el-button>
</template>

<style scoped>
.my-button {
  background-color: red; /* 这段样式不能生效 */
}
</style>

在这个例子中，.my-button 的样式并不会生效，这是因为 Element UI 的组件内部并没有 data-v-xxxxxxx 属性，Element UI 的内部样式是全局的，而 scoped 样式只会影响带有 data-v-xxxxxxx 属性的元素。

2.举个正例

<template>
  <el-button class="my-button">Click Me</el-button>
</template>

<style scoped>
::v-deep .my-button {
  background-color: red; /* 这段样式将生效 */
}
</style>

1. • 在这个例子中，因为使用 ::v-deep 选择器时，Vue 会构建一个更加广泛的 CSS 选择器，将这个样式传递到子组件中。因此，即使子组件没有 data-v-* 属性，::v-deep .my-button 选择器仍然可以作用于 Element UI 的按钮。

总结

• Scoped 的优势：使用 scoped 样式可以有效避免组件间样式冲突，使样式更加模块化和可管理。
• 穿透的必要性：在修改第三方组件（如 Element UI）样式时，使用 ::v-deep 允许我们突破样式的作用域限制，从而可以更改这些组件的默认样式。
• 编译后的差异：如果使用 ::v-deep，Vue 会生成适用于全局的选择器，使样式能够匹配到不在当前作用域内的组件；而不使用它时，样式会受到 scoped 限制，无法匹配到全局样式。

更多面试资料：前端资料