3个 Vue Scoped 的核心原理

大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻‍💻，关注我，科技未来或许我能帮到你！

先用一句话概括 Vue Scoped 的核心原理：Vue 的 scoped 通过 唯一属性标记 + 属性选择器限定作用域，实现组件样式隔离，辅以深度选择器按需穿透子组件。

下面我再把核心原理拆成 3 部分，给朋友们做一一讲解。

一、唯一属性标记

当组件使用 <style scoped> 时，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搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~