style scoped 原理

最新推荐文章于 2024-04-04 11:49:38 发布

果果ha

最新推荐文章于 2024-04-04 11:49:38 发布

阅读量538

点赞数

分类专栏： css3 vue 浏览器的渲染

本文链接：https://blog.csdn.net/cuteyDan/article/details/111503336

版权

css3 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

浏览器的渲染

4 篇文章 0 订阅

订阅专栏

在了解 <style scoped></style> 前先回顾vue实例的挂载和渲染流程：

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

一、vue-loader

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

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

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

<template>
  <div class="App">
    {{ msg }}
    <ParentA></ParentA>
    <ParentB></ParentB>
  </div>
</template>
<style>
.App {
  color: #000;
}
</style>


// --- ParentA
<template>
  <div class="ParentA">
    {{ msg }}
  </div>
</template>
<style>
.ParentA {
  color: red;
}
</style>


// --- ParentB
<template>
  <div class="ParentA">{{ msg }}</div>
</template>
<style>
.ParentB {
  color: blue;
}
</style>

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

<head>
  <style type="text/css">
	.ParentA {
	  color: red;
	}
  </style>
</head>

<body>
  <div class="ParentA"> ParentA </div>
  <div class="ParentA">ParentB</div>
</body>

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

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

<style type="text/css">
  .ParentA[data-v-183fa219] {
	color: red;
  }
</style>
<div data-v-183fa219  class="ParentA"> ParentA</div>
<div class="ParentA">ParentB</div>

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

二、scoped 原理

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

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

参考：

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

果果ha

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
style scoped 原理

在了解 <style scoped></style> 前先回顾vue实例的挂载和渲染流程：其中template模板在运行时进行编译，它会利用Vue内部的编译器进行模板的编译，字符串模板会转换为抽象的语法树，即AST树(抽象语法树)一、vue-loader 一个 vue 的项目中，整个项目是通过.vue单文件组件组织的，我们写的单文件组件都被处理为了SFC对象(单个文件组件), 即包含了单个HTML模块, 单个脚本模块, 一个或多个样式模块的功能完备的...
复制链接

扫一扫