Vue组件中scoped的原理

一、使用场景

::: tip

在编写Vue组件时，我们通常希望一些样式只作用于这一个组件，而不影响全局，此时只需要在style标签后加上一个scoped就可以了，但它是怎么做到的呢？

当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。

如果你善于观察，应该会发现，渲染后的dom元素上有很多 data-v-xxxxx 这样的标识，其实这就是秘密所在.

:::

二、实现原理

scoped属性的效果主要是通过PostCss实现的

• 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx
• 给