style scoped 原理

在了解 前先回顾vue实例的挂载和渲染流程：

其中template模板在运行时进行编译，它会利用Vue内部的编译器进行模板的编译，字符串模板会转换为抽象的语法树，即AST树(抽象语法树)

一、vue-loader 

       一个 vue 的项目中，整个项目是通过 .vue 单文件组件组织的，我们写的单文件组件都被处理为了SFC对象(单个文件组件), 即包含了单个HTML模块, 单个脚本模块, 一个或多个样式模块的功能完备的结构单元。

       vue-loader 的存在我们才得以组件化的形式进行编码，使vue 组件里的 style、template、script分别会编译为相应的 style 标签、html 标签以及 script 标签引入。

下面是一个简单的 vue 组件例子：

// --- ParentA

// --- ParentB

它通过 vue-loader 进行编译后，在浏览器中是这样显示的：

 ParentA ParentB

可以看出 ParentA.vue 组件对.ParentA 类的样式更改是会污染到全局样式的，也就是说会影响到 ParentB.vue 组件样式，一个项目中，不同的人的开发会导致两个不同的组件中使用了相同的类名，从而互相之间产生影响，vue-loader 给我们提供了 scoped 属性，从编码上解决了这个问题。

给 ParentA.vue 的 style 标签添加上 scoped 属性，这时候编译输出的是：

 ParentA
ParentB

可以看到输出的 ParentA.vue 的 style 标签内多了一个属性选择器，并且 html 标签上也多了对应的 data-v-183fa219 属性值。这样的话，无论 .ParentA 的样式怎么变都不会影响到 ParentB 的样式了，即使它们使用了同一个类名，这就是所谓的作用域约束。

二、scoped 原理

1. 编译过程中Webpack通过调用Vue Loader，单文件组件都被处理为了SFC对象
2. 判断当前SFC对象样式块中是否有scoped属性
3. 有的话，给组件HTML模板添加自定义属性 (Attribute) data-v-x, 以及给组件内CSS选择器添加对应的属性选择器 (Attribute Selector) [data-v-x], 达到组件内样式只能生效与组件内HTML的效果, 代码效果如下:
    

4. 补充3: stylePostLoader 在对样式模板进行解析过程中，对含 scoped 标记的模板引入插件 stylePlugins/scoped.js, scoped.js 将[data-v-x], 添加到选择器末尾，所以有scoped 的style模版编译后，会携带一个[data-v-x]属性选择器，只对对应的html模板生效，即起到了‘使样式变得私有’的作用
5. 另外，在第四步的过程中，如果出现深度作用选择器，那么就不会将[data-v-x],添加到选择器末尾，所以可以用深度选择器来覆盖带有scoped的组件的样式：
   
   

参考：

深入剖析Vue源码 - 完整挂载流程和模板编译

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！