样式的作用域
scoped
既然谈到样式的作用域，那就要说一下scoped了，scoped这个单词直译过来是“有效的范围”or“被限制的”的意思，在编程中，“scoped”通常用于描述变量、函数、对象的作用域，即它们可以被访问的范围。在CSS中，scoped 属性是 HTML5 中的新属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
在开发VUE项目的时候，一般会对某个组件的style标签加上scoped属性，比如，如果你在组件的 标签上添加了 scoped 属性，那么该组件的样式将仅适用于该组件的模板中的元素，这样就可以让组件之间的样式不互相污染，避免样式污染和组件之间的样式冲突，使得组件的样式更加可控和可维护。如果一个项目中的所有style标签全部加上了scoped，相当于实现了组件的私有化，样式的模块化。
那么scoped是如何实现让style的样式独立的呢？
是通过在编译时将组件的样式添加一个唯一的哈希值来实现的。这个哈希值会作为 CSS 类名的前缀，从而将样式限制在该组件中。vue中的scoped属性的效果通过转译实现，观察渲染的DOM结构可以发现，在DOM结构以及css样式上加了唯一的标记，使样式唯一且只作用于含有该属性的dom。 转译前后如下代码：
转译前：
<template>
<div class="main-wrap">内容</div>
</template>
<style scoped>
.box {
margin: 20px;
}
</style>
转译后：
<template>
<div class="main-wrap" data-v-4e4425b0>内容</div>
</template>
<style>
.main-wrap[data-v-4e4425b0] {
margin: 20px;
}
</style>
需要注意的是，由于 scoped 样式只适用于当前组件的模板中的元素，父组件无法直接修改子组件的样式，如果组件内部还有组件，想要修改子组件中的样式，该怎么办呢？请看下文⬇
CSS样式穿透
1./deep/（一般应用于sass与less的样式穿透），使用格式如下：
/deep/第三方组件类名 {
样式
}
</style>
2.>>> （一般应用于stylus的样式穿透），使用格式如下：
外层类名 >>> 第三方组件类名 {
样式
}
</style>
如果不想用样式穿透的话，也可以在写一套不加scoped的style样式，去单独控制，以上在vue项目开发使用element-ui组件库时可能会经常用到，通过样式穿透来修改element-ui默认的样式。
