Vue中的scoped探索

---

前言

在Vue组件中 style 标签中我们经常使用 scoped 属性来防止在修改父组件的样式时把其中的子组件中的样式修改掉，使得它的样式只在本组件中起作用，所有我们平常开发中都在 style 标签中添加这个属性。而如果在本组件想修改子组件中的样式，我们可以使用深度选择器来修改其子组件样式。

---

在开发中，经常遇到这个问题，于是想着一探究竟！

一、Vue中的Scoped深究

代码示例：<style lang="scss" scoped></style>
上面就是我们经常在Vue组件编写样式的代码

为什么我们经常在谷歌浏览器中检查元素时，看到有一些元素标签上面有类似<div class="demo" data-v-27e4e96e>中含有data-v-xxx的属性，这就是为了实现 scoped 效果而添加的这个属性。下面我们解释一下 scoped属性实现的原理：

1.首先data-v-xxx这个东西是通过文件路径名和内容 hash 生成的，每个Vue文件对应一个唯一的此 id。
2.在 vueLoader 中，每当引入一个.vue文件时