【css】vue中的scoped

scoped的原理：

PostCSS在给组件中的所有dom生成独一无二的动态属性，作为唯一标识，和外部样式区分开

PS：

 PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:

<style scoped lang="less">

.example{

    color:red;

}

</style>

<div class="example">scoped测试案例</div></template>

转译后:

.example[data-v-5558831a] {

    color: red;

}

<div class="example" data-v-5558831a>scoped测试案例</div></template>

这里主要写一个注意事项：

如果要对外部组件进行修改，需要把scoped去掉

这样才能实现回溯源头

否则，对外部组件修改的一些效果很有可能出不来

去掉之后，只是当前页面的样式修改了，并不会污染全部

穿透scoped的最简单方法是再写一个style不加scoped