在 Vue3 中，scoped 样式仍然使用了类似于 Vue2 中的原理，即通过给组件的根元素添加一个唯一的属性/类名，然后在组件内部使用这个属性/类名来限定样式的作用范围。
具体的原理如下：
-
当组件的
style声明中包含了scoped属性时，Vue 编译器会自动将所有的选择器都添加一个针对该组件的唯一属性/类名。 -
为了生成唯一的属性/类名，Vue3 中使用了一个名为
data-v-[hash]的属性/类名，并将该属性/类名添加到组件的根元素上，以达到样式的作用范围限定。例如，一个组件的根元素生成的属性/类名可能是
data-v-16aaeaf6。 -
编译器会将组件的样式中的所有选择器都使用这个属性/类名进行限定，确保只有在该组件的根元素上添加了这个属性/类名的元素才会应用该样式。
例如，样式选择器
.container会被编译为.container[data-v-16aaeaf6]，这样样式只会应用到具有data-v-16aaeaf6属性的元素上。
这样，每个组件的样式都会被限定在组件的根元素上，避免了样式冲突的问题，同时也提供了更好的可维护性和封装性。