前言：

随着前端应用程序变得越来越复杂，组件化的开发模式成为了主流。在 Vue.js 中，开发者可以通过 .vue 文件创建独立的组件，每个组件包含模板、逻辑和样式。然而，在不加以控制的情况下，组件中的样式默认是全局的，这意味着任何组件的样式都有可能影响到页面上的其他元素，导致样式冲突或意料之外的表现。

这时候的scoped便孕育而生了，scoped 是一个非常实用的特性，主要用于单文件组件（Single File Components，SFCs）中，以限制 CSS 样式的应用范围仅限于该组件内。这一特性有助于避免全局样式污染的问题，即一个组件的样式无意中影响到另一个组件的情况。

正文

在最近的一次的模拟面试上，面试官跟我聊起了vue中的components组件，其实这一块我是自以为挺了解的，然后问我“怎么不同组件中的style里定义的标签污染。”，我说“在style标签中加上scoped限定当前组件内的样式只在本组件内生效。”，她又说：“那scoped是怎么实现当前组件内的样式只在本组件内生效的？”

王德法？？这个我确实不知道了，没想到问的这么细节..............

我说完不知道后，面试官还是继续问别的了，没有让我滚回来等着。。

介绍scoped

一般的当我们在某一个组件中定义一个标签的属性时，这个标签的样式在其他的组件中也是会生效的。

下面这个是middle.vue文件中定义的span标签的样式

在header.vue文件中我也使用span标签，但是不再定义样式

看页面结果：

这是怎么回事呢？

因为在 Vue.js 中，如果在组件中定义的样式没有使用 scoped 属性，那么这些样式就会被认为是全局的，也就是说，它们不仅会影响到当前组件内的元素，还会影响到整个应用程序中的其他元素，包括其他组件。这是因为在没有 scoped 的情况下，组件的样式就像普通的 CSS 文件那样被加载到全局样式表中。

其实不只是标签会被泄露到全局范围内，而是所有没加scoped的组件中的样式都会被泄露到全局范围内：如这个.spa样式选择器，我还是将它定义在middle.vue组件中没有给style加上scoped，却在header.vue中调用了.spa。

原理

1. 唯一类名生成：Vue 会为每个使用了 scoped 的组件生成一个唯一的哈希类名。
2. 选择器重写：在构建过程中，所有 scoped 样式的选择器都会被修改，以包含上述的唯一类名，从而确保样式只应用于带有该类名的元素。
3. 全局样式表插入：尽管样式被修改，但最终仍然会被插入到全局样式表中，只是其作用范围被严格限制在了特定组件内。

这里我加上scoped限定作用我们看一下这个哈希值

例如，如果你在 <style scoped> 中定义了一个 .button 类，Vue 会将其转换成类似于 .data-v-12345678 .button 这样的选择器，其中 .data-v-12345678 是由 Vue 自动生成的唯一类名。

面试完查资料看着问题是真简单，但是就是不知道，面试总是在每个出其不意的地方给我一🔪，这些逻辑的实现要每一个都记住的话要头都要炸了。