vue中scoped的原理

vue组件中的scoped是很常用的属性，用于将组件的样式私有化，防止样式污染全局，那它又是如何实现的？

先来看一个简单的组件：

<template>
  <div>父组件</div>
</template>

<style>
div { color: red; }
</style>

以上组件目前没有添加scoped，那么实际的css代码会对外部所有的div都会产生影响。

no-scoped.png

所以需要添加一个scoped，而添加完scoped可以发现组件的DOM结构都加了用于确保唯一性的标识，这个唯一标识就是自定义属性（data-v-加八位的随机数）。

scoped.png

所以scoped之所以能实现样式隔离， 主要是给组件内所有标签元素添加了唯一的自定义属性，而且对应的样式选择器都会添加上这个唯一的属性选择器，这样就可以做到组件的样式隔离。