请解释 Vue 单文件组件中 style 标签上的 scoped 属性所起的作用，并说明其底层实现机制是怎样的？
考察说明
考查对 Vue 组件样式隔离机制的理解，包括 scoped 的作用和编译原理。
回答思路
- 【回答框架 1】scoped 属性的作用是为组件内的样式提供局部作用域，防止样式污染其他组件，同时避免外部样式影响本组件。它通过编译期的属性选择器实现样式隔离。
- 【回答框架 2】实现原理：在编译单文件组件时，Vue 会为当前组件的每个元素添加一个唯一的 data 属性，形如 data-v-xxxxxxx，属性值由文件路径和哈希生成。同时，scoped 样式会被重写，如 .class {} 会变成 .class[data-v-xxxxxxx] {}，从而使得样式只作用于带有该属性的元素。
- 【回答框架 3】对于子组件根节点，父组件的 scoped 样式可以作用到子组件根元素，因为子组件根元素同时带有父组件的 data 属性和子组件自身的 data 属性。但父组件样式无法穿透到子组件内部非根元素。
- 【回答框架 4】scoped 样式与深度选择器配合可影响子组件内部元素，如 /deep/、::v-deep 或 :deep()，它们会生成属性选择器与后代选择器的组合，实现样式穿透。
- 【回答框架 5】注意 scoped 不能完全防止所有样式冲突，如使用 CSS 变量或全局覆盖时可能仍需其它方案。此外，动态插入的 DOM 可能不会被添加 scoped 属性，导致样式不生效。
- 【关键点 1】scoped 通过编译期添加 data 属性和重写选择器实现样式隔离。
- 【关键点 2】父组件样式可影响子组件根元素，但不能作用于子组件内部元素。
- 【关键点 3】使用深度选择器（如 :deep()）可针对性穿透到子组件内部。
- 【关键点 4】scoped 样式是运行时附加属性，不改变 CSS 的层叠规则。
- 【易错点 1】误以为 scoped 完全隔离，实际仍有继承性样式和全局样式影响。
- 【易错点 2】混淆 /deep/、::v-deep 在不同版本中的写法，导致样式失效。
- 【易错点 3】忽略动态注入 DOM 不携带 scoped 属性，样式可能不生效。