1.简介
Vue中的属性隔离在Vue中Scoped是用来做样式隔离的，能够确保样式只在当前的组件内起作用。这意味着，在一个Vue组件中写的样式只会影响这个组件内的元素，并不会影响其他组件或者全局的样式。
使用很简单，只需要在style标签上，添加scoped关键字即可：
<template>
<div>
Hello, world!
</div>
</template>
<style scoped>
div {
background-color: yellow;
}
</style>
在这个例子中，我们给style标签添加了scoped，这样里面的样式只会影响当前组件内的元素，比如div添加的背景色，只会作用于这个组件的内部div了，不会影响到其他地方的样式。
2.基本原理
可以概括为以下几个步骤：
- 为当前组件模板的所有DOM节点添加相同的attribute，添加的属性和其他的scope不重复，比如data-v-123来表示它的唯一性；
- 在每句css选择器的末尾（编译后生成的css语句）加一个当前组件的data属性选择器，比如div[data-v-123]来私有化样式；
- 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上这个data属性;
所以，经过Vue的处理，上面的代码将被转化为类似下面这样的代码：
<template>
<div data-v-7ba5bd90>
Hello, world!
</div>
</template>
<style scoped>
div[data-v-7ba5bd90] {
background-color: yellow;
}
</style>
我们可以在浏览器中进行验证：
总的来说，scoped可以保证当前样式只针对于当前组件，这样可以让我们的样式代码更加清晰、模块化，也更容易维护。
再举个例子，正好也可以验证下上面提到的scoped基本原理的第3点：
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上这个data属性;
我们先创建一个NavBar.vue组件，里面只包含一个按钮和一个标题：
<template>
<div class="container">
<button>left</button>
<div class="title">NavbarTitle</div>
</div>
</template>
<style>
.container {
display: flex;
flex-direction: row;
}
.title {
flex: 1;
text-align: center;
}
</style>
然后在App.vue中使用该组件：
<template>
<navbar></navbar>
<div>AppVue</div>
</template>
<script>
import navbar from './components/NavBar.vue';
export default {
components: {
navbar
}
};
</script>
<style scoped>
div {
background-color: blue;
}
</style>
运行之后，查看标签结构：
从上图中可以看到除了在App.vue中添加的div标签，NavBar组件的根标签div也加上了data-v-7ba5bd90，所以如果组件内部包含有其他组件，只会给其他组件的最外层标签加上这个data属性。
3.样式穿透
在使用Vue的Scoped样式时，有时候会遇到父组件无法直接操作子组件样式的情况，这就是所谓的scoped样式的穿透问题。
3.1 举例说明
我们可以将上面的那个例子进行修改，进行验证。
NavBar.vue:
<template>
<div class="container">
<button>left</button>
<div class="title">NavbarTitle</div>
</div>
</template>
<style>
.container {
display: flex;
flex-direction: row;
}
.title {
flex: 1;
text-align: center;
}
</style>
App.vue：
<template>
<navbar></navbar>
<div>AppVue</div>
</template>
<script>
import navbar from './components/NavBar.vue';
export default {
components: {
navbar
}
};
</script>
<style scoped>
div {
background-color: blue;
}
/// 新加的样式
div button {
background-color: red;
}
</style>
基于上面的例子，我们在App.vue中新加了一个样式，想要修改NavBar组件中按钮的颜色。但是发现并没有起作用，究其原因是因为上面提到的，scoped只会给组件的最外层标签添加属性，并且在经过编译之后，CSS如下：
<style type="text/css">
div[data-v-7ba5bd90] {
background-color: blue;
}
div button[data-v-7ba5bd90] {
background-color: red;
}
</style>
但是我们的button还是之前的样式，并没有data-v-7ba5bd90这个属性，所以这个样式并不会起作用。
但是我们在项目开发中经常会遇到需要修改组件内标签样式的情况，这就需要使用深度作用选择器了。
3.2 深度作用选择器（Deep Selectors）
Vue提供了深度作用选择器，能够穿透scoped样式，直接影响子组件内部的样式。可以在负组件中使用 >>> 或者 /deep/ 来表示深度作用选择器，然后在后面跟上你要修改的子组件内部的样式，比如：
div >>> button {
background-color: red;
}
或者
div /deep/ button {
background-color: red;
}
然后我们在浏览器中看下其样式，发现和之前的有所改变，[data-v-7ba5bd90]放到了div后面，而不是button后面了：
<style type="text/css">
div[data-v-7ba5bd90] {
background-color: blue;
}
div[data-v-7ba5bd90] button {
background-color: red;
}
</style>
通过这种方式，我们就能够解决scoped样式穿透的问题，直接修改子组件内部的样式，而不会受到scoped的限制。
注意事项：
- 使用深度作用选择器虽然能够解决scoped样式的穿透问题，但是不要滥用，以免影响到其他组件的样式；另外，深度作用选择器的性能也会有一些影响；
4. 总结
在使用Vue中的Scoped样式时，我们需要知晓其原理，了解其优点和缺点，这样可以更好的去排查问题和提升工作效率。
优点：
- 样式私有化：更容易管理和维护样式，避免了样式的冲突和污染；
- 组件化开发：每个组件都有独立的样式，提高了代码的可维护性和复用性；
缺点：
- 样式权重增加：scoped样式会给每个样式增加特定的选择器属性，导致样式权重增加。可能会导致样式覆盖和继承方面的问题，需要更高的权重来覆盖scoped样式；
- 无法直接操作子组件内部样式：如果需要操作子组件内部样式，就需要用深度作用选择器或其他方式解决；
- 性能问题：使用scoped时，浏览器需要额外处理样式选择器；
