Vue scoped

scoped：样式私有化

在vue文件的style标签上添加scoped属性，样式属性只作用于当前组件，不受其他组件样式影响，实现了样式的模块化

组件样式

<template>
  <div class="button-warp">
    <button class="button">text</button>
  </div>
</template>
...
<style scoped>
  .button-warp{
    display:inline-block;
  }
  .button{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
  }
</style>

浏览器渲染后

<div data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
</div>

.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}

编译过后给dom节点加了一个不重复的data属性来表示唯一性，在css选择器末尾添加了data选择器来实现私有化(深度作用选择器)

虽然scoped实现组件样式私有化，但是由于css优先级的问题，使用scoped导致组件样式权重加重，外部修改组件内部样式需要更高的权重，层级过深会极大增加复杂度

scoped使用：组件样式使用场景单一，几乎不需要来自外部的样式修改

建议给组件最外层标签添加与name相同的class，其他样式通过嵌套的方式写在里面