Vue 进阶面试题, Vue 中 style 的 scoped 属性有什么用?它的实现原理是什么?

Step 1

Q:: Vue 中 style 的 scoped 属性有什么用？

A:: Vue 中的 scoped 属性用于限制 <style> 标签中的样式仅作用于当前组件。这样可以防止样式冲突，即同名的 CSS 类不会在全局范围内被应用，从而保证组件的样式独立性。

Step 2

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

A:: scoped 属性的实现原理是在编译时，Vue 会为每个带有 scoped 的样式规则生成一个唯一的属性选择器（通常是一个 data-v-xxx 的属性）。这个选择器会被附加到当前组件的 DOM 节点和样式规则中，确保这些样式只会应用到该组件内的元素上。

Step 3

Q:: Vue 中 scoped 和模块化 CSS 的区别是什么？

A:: scoped 属性是通过动态添加属性选择器来实现样式隔离，而模块化 CSS（如 CSS Modules）则是通过给每个类名生成唯一的哈希值来实现样式隔离。两者的目标都是防止样式冲突，但实现方式不同。

Step 4

Q:: 如何在 Vue 中同时使用 scoped 和全局样式？

A:: 在 Vue 中可以通过在单文件组件中使用多个 <style> 标签，其中一个标签不加 scoped 属性，这样的样式会被应用到全局。另一部分使用 scoped 的样式则只在当前组件中生效。这种做法可以在同一组件中使用全局样式和局部样式。

Step 5

Q:: scoped 属性在 Vue3 中的增强功能是什么？

A:: 在 Vue 3 中，scoped 样式增强了对动态组件的支持，同时引入了 v-bind 语法，可以将组件的动态属性绑定到样式中。这使得样式更加灵活，可以根据组件的状态或属性来动态变化。