vue scoped原理详解

• style标签有scoped属性时，它的css只作用于当前组件中的元素，实现样式私有化，使组件之间的样式互不污染，实现样式的模块化；

• 样式污染产生原因

  webpack对css打包时，会分离到一个单独的css文件，同名的className会产生权重覆盖，进而影响整个应用；

• scoped原理

  webpack打包时，会给html模板添加自定义属性data-v-x，以及给组件css选择器添加对应属性选择器[data-v-x]，达到组件内样式只能生效于组件内HTML效果；

  <div class='lionad' data-v-lionad></div>
  <style>
  .lionad[data-v-lionad] {
    background: @tiger-orange;
  }
  </style>