面试题：Vue 中 style 的 scoped 属性有什么用？它的实现原理是什么？

`scoped` 属性的作用

在 Vue 中，<style> 标签的 scoped 属性用于实现样式作用域化，即样式仅对当前组件生效，不会影响其他组件。这样可以避免组件之间的样式冲突，提高样式的可维护性。

示例

<template>
  <div class="example">
    <p>This is a scoped style example.</p>
  </div>
</template>

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

在上面的例子中，.example 样式只会作用于当前组件的 <div> 元素，而不会影响其他组件中的 .example 类。

`scoped` 的实现原理

Vue 通过 PostCSS 和 属性选择器 来实现 scoped 样式的作用域化。具体步骤如下：

1. 添加唯一属性

在编译过程中，Vue 会为当前组件的每个元素添加一个唯一的属性（如 data-v-f3f3eg9），这个属性是随机生成的，确保每个组件的属性值唯一。

编译前：

<template>
  <div class="example">
    <p>This is a scoped style example.</p>
  </div>
</template>

编译后：

<div class="example" data-v-f3f3eg9>
  <p data-v-f3f3eg9>This is a scoped style example.</p>
</div>

运行 HTML

2. 转换样式

Vue 会将 scoped 样式中的选择器转换为带有唯一属性的选择器，确保样式只作用于当前组件。

编译前：

.example {
  color: red;
}

编译后：

.example[data-v-f3f3eg9] {
  color: red;
}

3. 样式作用域化

由于样式选择器中添加了唯一属性，样式只会作用于带有相同属性的元素，从而实现样式的作用域化。

`scoped` 的注意事项

子组件根元素：

scoped 样式会作用于子组件的根元素，因为子组件的根元素也会被添加相同的唯一属性。
如果希望样式不影响子组件，可以使用 >>>、/deep/ 或 ::v-deep 穿透作用域。

/* 使用 >>> 穿透作用域 */
.parent >>> .child {
  color: blue;
}

/* 使用 /deep/ 穿透作用域 */
.parent /deep/ .child {
  color: blue;
}

/* 使用 ::v-deep 穿透作用域 */
.parent ::v-deep .child {
  color: blue;
}

全局样式：
- 如果需要定义全局样式，可以使用不带 scoped 的 <style> 标签，或者将全局样式放在单独的 CSS 文件中。
性能影响：
- scoped 样式会增加 CSS 选择器的复杂度，可能会对性能产生轻微影响，但在大多数情况下可以忽略不计。
动态内容：
- 对于通过 v-html 插入的动态内容，scoped 样式不会生效，因为这些内容不会被添加唯一属性。

`scoped` 的优缺点

优点：

样式隔离：避免组件之间的样式冲突。
可维护性：样式与组件绑定，便于维护和调试。
模块化：支持组件化开发，符合 Vue 的设计理念。

缺点：

选择器复杂度增加：编译后的选择器较长，可能影响性能。
穿透样式麻烦：需要使用 >>>、/deep/ 或 ::v-deep 穿透作用域。
动态内容不支持：通过 v-html 插入的内容无法应用 scoped 样式。

总结

scoped 的作用：实现样式作用域化，避免组件之间的样式冲突。
实现原理：
1. 为组件元素添加唯一属性。
2. 转换样式选择器，添加唯一属性。
3. 通过属性选择器实现样式作用域化。
注意事项：
- 子组件根元素会受到影响。
- 需要使用 >>>、/deep/ 或 ::v-deep 穿透作用域。
- 动态内容不支持 scoped 样式。