scoped的工作原理
当在 <style> 标签上使用 scoped 属性时，Vue 会为当前组件的每个元素添加一个唯一的 data-v-xxxxxx 属性，并将样式规则中的选择器修改为包含该属性的形式。
编译阶段：
在编译 .vue 文件时，Vue 的编译器会处理 <style> 标签，具体步骤如下：
-
解析样式：使用
postcss解析样式，生成 AST（抽象语法树）。 -
添加属性选择器：遍历 AST，为每个选择器添加
[data-v-xxxxxx]属性选择器。 -
生成唯一属性：
xxxxxx是一个基于组件文件路径和内容的哈希值，确保唯一性。
运行时：
在运行时，Vue 会为组件的根元素和所有子元素添加 data-v-xxxxxx 属性。
scoped的优点
-
样式隔离：scoped可以有效地防止组件间的样式冲突，确保每个组件的样式都是独立的。
-
提高可维护性：由于样式被限制在组件内部，因此当需要修改或调试样式时，可以更容易地定位到相关的组件和样式。
scoped的局限性
-
性能影响：虽然scoped样式带来了很多好处，但由于需要为每个组件生成唯一的属性选择器和修改样式选择器，因此可能会对性能产生一定的影响。然而，在大多数情况下，这种影响是可以接受的。
-
无法使用全局样式库：如果需要使用全局样式库（如Bootstrap），则需要在全局样式文件中引入，而不能在scoped样式中使用。这是因为scoped样式被限制在组件内部，无法应用到全局元素上。
-
深度选择器：在某些情况下，你可能需要为scoped样式添加一个全局样式或修改子组件的样式。这时可以使用深度选择器（如Vue 3中的
::v-deep或Vue 2中的/deep/、>>>）来“穿透”scoped限制。但需要注意的是，过度使用深度选择器可能会破坏样式的隔离性。
