Vue 基础面试题, 怎么使 CSS 样式只在当前 Vue 组件中生效?

Step 1

Q:: 怎么使 CSS 样式只在当前 Vue 组件中生效？

A:: 在 Vue 组件中使用 <style scoped> 标签可以使 CSS 样式只在当前组件中生效。scoped 属性会给每个样式规则添加一个唯一的属性选择器，这样可以避免样式的全局污染。注意，scoped 的样式只对当前组件的 DOM 生效，不会影响父组件或子组件。

Step 2

Q:: Vue 中 scoped 的实现原理是什么？

A:: Vue 使用 PostCSS 为每个组件的样式添加一个唯一的 data 属性（如 data-v-xxxxxx），并将这个属性添加到每个选择器中，这样可以保证样式只作用于当前组件的 DOM 节点。编译时，Vue 的编译器会自动处理这些数据属性，从而实现样式的隔离。

Step 3

Q:: 在什么情况下不建议使用 scoped 样式？

A:: 当样式需要在多个组件间共享时，不建议使用 scoped 样式，因为它们只在当前组件中生效。如果希望样式全局生效，应该使用全局样式或者 CSS Modules。

Step 4

Q:: 除了 scoped 以外，还有哪些方式可以在 Vue 中实现样式的隔离？

A:: 除了 scoped，你还可以使用 CSS Modules 或者通过 BEM (Block Element Modifier) 命名规范来实现样式隔离。CSS Modules 是通过将样式的类名哈希化来实现隔离，BEM 则是通过命名规则来避免样式冲突。

Step 5

Q:: Vue 组件样式在子组件中的作用范围是如何控制的？

A:: 默认情况下，父组件的样式会作用于子组件，但如果使用 scoped，父组件样式将不会影响子组件。如果需要父组件样式影响子组件，可以通过深度选择器 >>> 或者 /deep/ 来指定。