vue的scoped和module的区别

一，scoped用法。

1，使用原理。

采用postcss的相似的方式。在scoped规定区域内的样式。渲染后给元素加上属性，并将选择器变成属性选择器 。这样就限定了范围。防止形成全局样式。
eg:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

渲染后

<style>
.example[data-v-5558831a] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

2，缺点，

无法修改子组件、第三方组件、 v-html 创建的 DOM 、的样式，

3，解决方案。

1),通过穿透scoped，使用深度选择器，例如'>>>'。
2),另外用一个普通不含scoped的style标签。在里面书写样式。
总结：上面不管是那种方式都是违背scoped的原则。都会形成全局样式。所以使用scoped的一般是中小型项目。

二,模块式样式

1，使用原理

将module的里面的样式都保存在$style对象中，渲染后选择器会加上该组件所在文件的文件名作为前缀；由于是个对象所以也同事能将样式导出供其他页面使用。

2，基本例子：

<template>
  <div :class="$style.content">
    <div :class="$style['title-wrap']">我是红色的</div>
    <green-title></green-title>
  </div>
</template>
 
<style lang="scss" module>
.content {
  .title-wrap {
    font-size: 20px;
    color: red;
  }
}
</style>

渲染后

3，导出使用

<template>
  <div :class="$style.content">
    <div :class="$style['title-wrap']">我是红色的</div>
    <green-title :styleTitle="$style['title-wrap']"></green-title>
  </div>
</template>

<template>
  <div class="content">
    <div :class="styleTitle">我是绿色的</div>
  </div>
</template>
<script>
 
export default {
  props: {
    styleTitle: String,
  },
}
</script>

3，结论

根据渲染前后变化其实也是就形成一个特殊的模块化的命名方式。来形成全局样式，只是由于加上选择器前缀比较显得跟私有化些，一般难以重名而已。
4，