理解scoped和/deep/工作原理

scoped是什么意思呢？

加了scoped，PostCSS给组件中的所有dom添加了一个独一无二的动态属性[哈希值]，并且给CSS选择器额外添加一个对应的属性选择器，使得样式只作用于含有该属性的dom——组件内部dom，防止组件之间的样式污染。

    
登录

postcss 是一种对css编译的工具，通过内部插件实现功能
1 . 自动补全浏览器前缀 autoprefixer，
2 . 自动把px代为转换成rem，
3 . css 代码压缩等等。

打包编译后这个属性会变成这样：

    
登录

/deep/、::v-deep、:deep() 深度选择器的原理

1、使用场景：

当我们开发一个页面使用了子组件的时候，如果这时候需要改子组件的样式，但是又不影响其他页面使用这个子组件的样式的时候

2、原理

scoped 样式中的一个选择器能够选择到子组件 或 后代组件中的元素
/deep/ === [哈希值]

父组件

子组件

那么编译后的结果就会是：

    
我是父组件
    

        
我是子组件
        

            
我是子组件的段落
        
    


[data-v-257dda99b] .child .dyx {
    background-color: red;
}

因为Vue不会为深度作用选择器后面的选择器单元增加 属性选择器[data-v-实例标识]，所以，后面的选择器单元能够选择到子组件及后代组件中的元素