前端面试：Vue 中 CSS scoped 的原理

使用<style scoped>为什么在页面渲染完后样式之间并不会造成污染？

搭建一个简单的Vue项目测试一下：

总结 

每个组件都会拥有一个[data-v-hash:8]插入HTML标签，子组件标签上也具体父组件[data-v-hash:8];

如果style标签加了scoped属性，里面的选择器都会变成(Attribute Selector) [data-v-hash:8];

如果子组件选择器跟父组件选择器完全一样，那么就会出现子组件样式被父组件覆盖，因为子组件会优先于父组件mounted，有兴趣可以测试一下哦。

 vue使用webpack时，webpack的vue-loader将.vue文件进行解析。

可以看到解析完vue文件的结果大概就是这样的：

 vue文件解析完之后template，script，style等都有个依赖的路径，后续可以通过配置的loader进行解析了。

可以看到解析带scoped属性的style的结果大概就是这样的：

新的依赖解析

分析{tyep：style}的处理流程顺序：

vue-loader、style-post-loader、css-loader、style-loader

可以看到vue-loader处理完后返回的就是style.content，也就是style标签下的内容，然后交给后续的loader继续处理

处理最终返回的code是这样的：