vue scoped 以及 /deep/ 原理

1. scoped

使用 vue 写样式时，可以使用 scoped 属性，使组件得样式只在当前组件生效

原理： vue 会给每个节点添加一个属性值，并且处理样式时，给每个样式添加一个属性选择器，如下

// html
<div class="fotter" data-v-001></div>
// css 
.fotter[data-v-001] { /* ... */ }

2. /deep/

同理，增加 /deep/ 时，vue 会将子组件得根节点增加属性，并且样式包装成后代属性选择器