面试题：Vue中scoped CSS如何实现样式隔离

属性选择器：当在 <style> 标签上使用 scoped 属性时，Vue 会为当前组件的 DOM 元素添加一个独一无二的动态属性，例如 data-v-xxxxxx，这里的 xxxxxx 是一个根据组件生成的哈希值。同时，该组件内的所有 CSS 规则都会自动添加这个属性选择器作为前缀。例如：

<template>
  <div class="test">Hello</div>
</template>

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

最终渲染后的 DOM 和 CSS 会类似这样：

<div class="test" data-v-xxxxxx>Hello</div>
<style>
.test[data-v-xxxxxx] {
  color: red;
}
</style>

这样一来，只有带有 data-v-xxxxxx 属性的 DOM 元素才会应用这些样式，从而实现了样式隔离。

Shadow DOM 模拟：虽然 Vue 并没有真正使用浏览器原生的 Shadow DOM 技术，但 scoped 的原理与之类似。它通过为每个组件的样式和 DOM 元素添加特定标识，使得组件之间的样式不会相互干扰。

深度选择器问题：当需要对组件内部的子组件进行深度样式修改时，普通的 CSS 选择器无法穿透到子组件。例如，如果子组件有一个 .child - class 类，在父组件的 scoped 样式中直接写 .child - class 是无效的。虽然可以使用 >>>, /deep/ 或 ::v - deep 这样的深度选择器来解决，但在某些构建工具或环境下可能存在兼容性问题。例如在使用 Sass 等预处理器时，>>> 可能会被解析错误。
全局样式影响：如果在全局样式中有与 scoped 样式相同的选择器，且全局样式权重足够高，仍然可能覆盖 scoped 样式。例如全局样式定义了 body .test { color: blue; }，而组件内 scoped 样式为 .test { color: red; }，由于 body .test 权重高于 .test[data - v - xxxxxx]，最终可能显示蓝色。
动态样式生成困难：当需要动态生成大量具有不同样式的元素时，scoped 样式可能会变得难以管理。因为每个样式规则都需要添加属性选择器前缀，对于通过 JavaScript 动态创建的元素，可能需要额外的处理来确保样式正确应用。
性能问题：随着项目规模增大，每个组件样式都添加属性选择器会增加 CSS 文件大小和浏览器解析样式表的时间。大量的属性选择器也会影响样式匹配的性能，因为浏览器需要对每个元素匹配更多的选择器规则。

星途面试题库