Scoped Styles 为什么可以实现样式隔离？

在 Vue 中，作用域样式（Scoped Styles）是通过以下原理实现的：

1. 唯一选择器：

   • 当 Vue 编译单文件组件时，在样式中使用 scoped 特性或 module 特性时，Vue 会为每个样式选择器生成一个唯一的属性选择器。
   • 这里的唯一选择器是类似于 [data-v-xxxxxxx] 的属性选择器，其中 xxxxxxx 是一个唯一的标识符。

2. 编译时转换：

   • Vue 在编译过程中会解析单文件组件的模板，并对样式进行处理。
   • 对于具有 scoped 特性的样式，Vue 会将选择器转换为带有唯一属性选择器的形式，例如 .class 会被转换为 .class[data-v-xxxxxxx]。
   • 对于具有 module 特性的样式，Vue 会为每个选择器生成一个唯一的类名，并将类名与元素关联起来。

3. 渲染时应用：

   • 在组件渲染过程中，Vue 会为组件的根元素添加一个属性值为唯一标识符的属性，例如 data-v-xxxxxxx。
   • 当组件渲染完成后，样式选择器中的唯一属性选择器或唯一类名将与组件根元素的属性匹配，从而实现样式的隔离。
   • 这样，只有具有相同属性值的元素才会应用相应的样式，避免了样式冲突和泄漏。

通过以上原理，Vue 实现了作用域样式的隔离。每个组件的样式都被限制在自己的作用域内，不会影响其他组件或全局样式。这种方式实现了组件级别的样式隔离，使得组件可以更好地封装和重用，同时减少了样式冲突的可能性。