1. scope的作用
默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是：
（1）单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
（2）每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素
为了解决这个问题有了scope
在vue文件中的 style 标签上，有一个特殊的属性：scoped。当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了scoped，相当于实现了样式的模块化。
2. scope的原理
给页面元素添加自定义属性，且修改css为属性选择器
h1[data-v-123f24]{
background:red;
}<h1 data-v-123f24>Vue会编译成这样,这样其它组件的标签没有自定义属性就不会被影响</h1>3. 样式穿透的使用
scope导致当前的样式选择器附加属性选择器[data-v-123f24]，当前Vue页面的元素附加这个特定属性[data-v-123f24]。
这会造成了一个问题：Vue页面所使用的组件中的元素（除了根元素）并没有这个属性[data-v-123f24]，无法应用期望的样式。
所以有了样式穿透，有好几种写法，会这种就够了：
父选择器 /deep/.u-upload__wrap{
display: flex;
justify-content: center;
.u-upload__wrap__preview{
margin-right: 0px;
}
}其它写法：
如果你使用的是css，没有使用css预处理器，则可以使用>>>，/deep/，::v-deep。
如果你使用的是less或者node-sass，那么可以使用/deep/，::v-deep都可以生效。
如果你使用的是dart-sass，那么就不能使用/deep/，而是使用::v-deep才会生效。
4. 样式穿透的原理
用了样式穿透后，在deep之后的选择器最后就不会加上标识，组件自然能应用样式。
