scoped样式通过编译时添加唯一data-v-xxx属性并重写选择器实现隔离，子组件不继承该属性，故不受影响；::v-deep已废弃，:deep()推荐用于局部解除作用域，:global()完全退出作用域。
scoped样式为什么不会影响其他组件
Vue 3 的 scoped 不是靠 CSS 隔离，而是靠属性选择器“作弊”。编译时，Vue 会为当前组件的每个元素自动添加一个唯一属性（如 data-v-f3f2eb1c），同时把所有样式规则重写成带该属性的选择器。
比如你写：
<style scoped>
.button { color: red; }
</style>
实际生成的 CSS 类似：
.button[data-v-f3f2eb1c] { color: red; }
而对应 HTML 会被 Vue 模板编译器注入属性：
<button class="button" data-v-f3f2eb1c></button>
- 这个
data-v-xxx属性在组件首次渲染时就确定，且整个组件树内唯一 - 子组件的根元素不会自动继承该属性，所以子组件内部样式默认不匹配父组件的
scoped规则 - 深层选择器（如
.parent ::v-deep .child）本质是取消部分属性限制，不是“穿透”，而是让编译器保留原始选择器结构
::v-deep、:deep() 和 :global() 的区别在哪
这些是 Vue 3 `
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章