scoped的原理

1. 基本概念

在 Vue 单文件组件（.vue 文件）中，可以通过在 <style> 标签中添加 scoped 属性来实现样式的局部作用。这意味着，在该标签内定义的样式只会应用于当前组件的元素，而不会影响全局或其他组件的样式。

<template>
  <div class="example">
    <h1>这是一个标题</h1>
  </div>
</template>

<style scoped>
.example {
  color: blue;
}
</style>

在这个例子中，.example 类只会影响当前组件中的 .example 元素，而不会影响其他组件或全局的样式。

2. 原理

Vue.js 使用了特定的机制来实现 scoped 样式。其原理如下：

自动生成唯一选择器: 当使用 scoped 时，Vue 会为每个元素生成一个独特的属性，例如
data-v-xxxxxx，并将这个属性添加到该组件的根节点及其子节点上。样式选择器也会被修改，以便仅匹配带有该属性的元素。

例子
对于上述的例子，Vue 可能会将样式转换为类似以下内容：

.example[data-v-123456] {
  color: blue;
}

同时，组件的根元素可能变为：

<div class="example" data-v-123456>
  <h1>这是一个标题</h1>
</div>

这就确保了 .example 类只会影响加了 data-v-123456 属性的元素。

3. 注意事项

深度选择器: 如果需要影响子组件或嵌套元素，可以使用深度选择器 >>> 或 /deep/。例如：

.parent >>> .child {
  color: red;
}

全局样式: 如果需要定义全局样式，可以在不使用 scoped 的

<style>
.global-class {
  color: green;
}
</style>

性能考虑: 虽然 scoped 样式提供了样式隔离，但在大型项目中使用过多的复杂选择器可能会对性能产生影响，因此应合理使用。

4. 总结

scoped 样式是 Vue.js 中非常实用的特性，它使得组件的样式更易于管理，避免了样式冲突的问题。通过了解其原理和用法，开发者可以更高效地编写和维护 Vue 组件的样式。