为什么 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 和 css一般如下：
<div class="example" data-v-1234567> <!--在浏览器中可查看编译后的结果：增加了data-v-1234567属性-->
Hello, World!
</div>
.example[data-v-1234567]{ /*在浏览器中可查看编译后的结果：增加了[data-v-1234567]属性选择器*/
color: blue;
}
在这个例子中，.example 的选择器变为 .example[data-v-1234567]，确保只有这个组件应用这个样式，而不会影响其他组件。
怎么修改第三方库的样式？
-
直接修改全局样式：
-
在
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>在这个例子中，因为使用
::v-deep选择器时，Vue 会构建一个更加广泛的 CSS 选择器，将这个样式传递到子组件中。因此，即使子组件没有data-v-*属性，::v-deep .my-button选择器仍然可以作用于 Element UI 的按钮。
-
总结
- Scoped 的优势：使用
scoped样式可以有效避免组件间样式冲突，使样式更加模块化和可管理。 - 穿透的必要性：在修改第三方组件（如 Element UI）样式时，使用
::v-deep允许我们突破样式的作用域限制，从而可以更改这些组件的默认样式。 - 编译后的差异：如果使用
::v-deep，Vue 会生成适用于全局的选择器，使样式能够匹配到不在当前作用域内的组件；而不使用它时，样式会受到scoped限制，无法匹配到全局样式。
