大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻💻，关注我，科技未来或许我能帮到你！
先用一句话概括 Vue Scoped 的核心原理：Vue 的 scoped 通过 唯一属性标记 + 属性选择器限定作用域，实现组件样式隔离，辅以深度选择器按需穿透子组件。
下面我再把核心原理拆成 3 部分，给朋友们做一一讲解。
一、唯一属性标记
当组件使用 时，Vue 通过 PostCSS 插件，在编译时为该组件生成一个唯一的哈希值（如 data-v-f3f3eg9），并注入到组件模板的所有 HTML 元素上。
如图：
二、属性选择器限定
Vue 自动将组件内的所有 CSS 选择器末尾，附加 [data-v-xxxxxx] 属性选择器，确保样式仅匹配当前组件的元素。
如图：
三、深度穿透
有个前置知识你要明白：
1、父组件的 scoped 会作用于子组件的根元素，但不会影响子组件内部元素（非根元素）。
2、父组件的 scoped 会在组件内的所有 CSS 选择器末尾，附加 [data-v-xxxxxx] 属性选择器。
然后我们再聊，为什么要在 scoped 中使用深度穿透？即 ::v-deep（Vue 3）或 >>>（Vue 2）。
如果不使用深度穿透：
子选择器必须同时满足父组件的哈希（data-v-parent），导致无法匹配子组件内部元素。
如果使用深度穿透：
子选择器不再检查自身父组件的哈希（data-v-parent），移除了子选择器的哈希限制，只需是父组件元素的后代即可，因此能穿透到子组件内部。
好了，今天要分享的内容就是这么多，联系和更多内容在绿色App搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~