Vue中scoped css和css module比较

Faremax 发布于2019-04-23 13:43 / 2750人阅读

摘要：官方文档可以直接在能跑起来的项目中使用。所以在使用的父组件中使用的子组件也要开启。能正常编译，而则会编译的不符合预期，所以平时养成良好的参数书写顺序也很重要。总结总结综上所述，前期进行不麻烦的配置，实现的效果比更优，这里推荐使用。

scoped css

官方文档

scoped css可以直接在能跑起来的vue项目中使用。

使用方法：

使用scoped划分本地样式的结果编译结果如下：

h1[data-v-4c3b6c1c] {
    color: #f00;
}

即在元素中添加了一个唯一属性用来区分。

缺点

一、如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。

二、根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重了：

即理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。

所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改，而且要注意权重问题，0.0迫不得已再使用!important。

三、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性：

所以一般父组件如果加了scoped，会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低，影响不到他们的样式。

不过也是可以通过如下方法影响到的：

四、scoped会使标签选择器渲染变慢很多倍

官方给了一些注意事项如下：

我们可以看到用标签选择器时scoped会严重降低性能，而使用class或id则不会。

css module

官方文档

css module需要增加css-loader配置才能生效，具体可看文档的实现。

注意

如果你使用的是style-loader，如果想让配置生效需要更换到文档所述的vue-style-loader（是vue-loader的一个依赖，无需多带带安装）。

二者区别可以从这里了找vue-style-loader

使用如下：

使用module的结果编译如下：

Im gray

.gray_3FI3s6uz {
    color: gray;
}

由此可见，css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。

这样$style.red就可以当做一个变量，并且可以在js中使用，如下：

我们可以看到，module在使用时多出了绑定和$style，如果你想更优雅，可以看一下这个vue-css-modules。

css module父子组件问题

在使用scss并开启css module时发现一个问题

使用module的父组件会在没有使用module的子组件的所有根类上增加hash改变其类名，可能会造成子组件样式应用不上。

如下是没有开启css module子组件的样式：

父组件开启css module后编译结果如下：

.comp_2tR6GNan {
  color: palegoldenrod;
}
.comp_2tR6GNan p {
  color: black;
}
.t_39GmF73s {
  color: teal;
}
div {
  color: yellow;
}

可以看到comp和t类都被修改了类名，如果根样式是标签选择器不会受影响。

所以在使用css module的父组件中使用的子组件也要开启css module。

使用css module在keyframes中的问题

使用CSS modules处理动画animation的关键帧keyframes，动画名称必须先写。

animation: ani 1s;能正常编译，而animation: 1s ani;则会编译的不符合预期，所以平时养成良好的css参数书写顺序也很重要。

总结

综上所述，css module前期进行不麻烦的配置，实现的效果比scoped css更优，这里推荐使用css module。

云服务器超融合服务器 css-modules css中 html中css css中视频封面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2250.html

Vue:scoped与module的使用与利弊

摘要：一个应用是离不开与，其中充斥的整个项目中。下面我会分别对与解决方案进行说明，最后在分析它们的利弊与选择。不过一个子组件的根节点会同时受其父组件有作用域的和子组件有作用域的的影响。但它的局限性是适用于中小项目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一个web应用是离不开html、css与js，其中css充...

zhoutk 2019-08-30 15:55 评论0 收藏0
Vue:scoped与module的使用与利弊

摘要：一个应用是离不开与，其中充斥的整个项目中。下面我会分别对与解决方案进行说明，最后在分析它们的利弊与选择。不过一个子组件的根节点会同时受其父组件有作用域的和子组件有作用域的的影响。但它的局限性是适用于中小项目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一个web应用是离不开html、css与js，其中css充...

zr_hebo 2019-08-23 14:56 评论0 收藏0
Vue:scoped与module的使用与利弊

摘要：一个应用是离不开与，其中充斥的整个项目中。下面我会分别对与解决方案进行说明，最后在分析它们的利弊与选择。不过一个子组件的根节点会同时受其父组件有作用域的和子组件有作用域的的影响。但它的局限性是适用于中小项目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一个web应用是离不开html、css与js，其中css充...

missonce 2019-08-02 14:10 评论0 收藏0
.vue文件中style标签的几个标识符

摘要：文件中标签的几个标识符在人生就要绝望的时候被编辑器所提示的一个所拯救卧槽写到最后才发现这个属性的具体卵用详情见最后解决办法问题背景问题由来项目中使用了框架与文件现状中使用类名进行了样式的绑定个人认为使用这种方式的绑定写起来很麻烦不仅仅是麻烦 .vue文件中style标签的几个标识符在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救.卧槽, 写到最后才发现这个属性...

_Suqin 2019-08-22 18:46 评论0 收藏0
单文件组件下的vue，可以擦出怎样的火花

摘要：线上另加入了排行榜功能，如需查看源码的，请切换到分支整个项目结构清晰，尤其单文件组件的表现力尤为突出，使得每个组件的逻辑都没有过于复杂，而且在的统筹下，的单向数据流模式使得所有的变化都在可控制可预期的范围内。 2016注定不是个平凡年，无论是中秋节问世的angular2，还是全面走向稳定的React，都免不了面对另一个竞争对手vue2。喜欢vue在设计思路上的先进性(原谅我用了这么一个...

Keven 2019-08-19 18:21 评论0 收藏0