项目里两个页面，同页一个叫 UserList.vue，面同命名一个叫 UserDetail.vue，样的影响各自写了个 .user-card 的同页样式。开发环境跑得好好的面同命名，切到详情页，样的影响卡片突然多了个蓝色边框——那是同页列表页的样式。打开 DevTools 一看，面同命名两条规则都生效了，样的影响没有谁覆盖谁，同页只是面同命名被合并了。这就是样的影响 Vue 单文件组件里最容易被忽略的坑：样式默认不隔离。

很多人以为 <style scoped> 是同页万能的。其实它只是面同命名给选择器加了个属性选择器，比如 .user-card[data-v-7ba5bd90]。样的影响如果两个页面的组件被同一个父组件引用，或者用了 keep-alive 缓存，甚至只是路由切换时 DOM 还没销毁，这个 data-v 属性就可能同时匹配到两个元素。我见过一个更离谱的：两个页面都用了 .title，一个设了 font-size: 20px，另一个设了 color: red。结果详情页的标题又大又红，因为列表页的样式被“继承”过来了——不是 CSS 继承，是选择器命中。

Vue 的 scoped 有个特性叫“深度选择器”，但很多人不知道它还会影响子组件根元素。比如你在父组件写 .parent .child { margin: 0 }，即使 .child 在子组件里，只要子组件根元素带上了父组件的 data-v 属性，这条规则就会生效。两个页面如果都用了同一个子组件，比如 <BaseButton>，而父组件又都写了 .btn { padding: 10px }，那按钮的样式就会互相打架。我调试过一个后台系统，列表页的“编辑”按钮是圆角，详情页的“保存”按钮是直角，原因就是两个页面都改了 .btn 的 border-radius，而 BaseButton 的根元素同时被两个父组件的 data-v 标记了。

那为什么开发时不容易发现？因为 Vue 的热更新会保留旧组件的样式，有时候你改完代码，样式没刷新，你以为生效了，其实只是缓存。真正暴露问题是在生产环境，或者用户从列表页点进详情页再返回，DOM 复用导致样式叠加。我习惯在 App.vue 里加一个全局的 style 重置，比如 * { box-sizing: border-box }，结果有一次两个页面都写了 .container { padding: 20px }，全局重置没影响，但两个 .container 的 padding 叠加成了 40px。用户反馈“页面怎么突然变宽了”，查了半天才发现是样式合并。

解决方式其实不复杂。要么用 CSS Modules，把类名编译成哈希，比如 .user-card_abc123，从根上避免冲突。要么用 BEM 命名，给每个页面的类名加前缀，比如 .list-user-card 和 .detail-user-card。但最省事的还是 <style scoped> 加上 ::v-deep 只用在必要的地方，别到处穿透。我现在的习惯是：每个页面的根元素加一个唯一的类名，比如 .page-user-list，然后所有样式都写在这个类下面，像 .page-user-list .user-card { ... }。这样即使两个页面都叫 .user-card，也不会互相影响，因为选择器的作用域被父级类名限制住了。

还有一个隐藏问题：keep-alive 缓存组件时，data-v 属性不会重新生成。你从列表页跳到详情页，再返回列表页，列表页的 DOM 被缓存了，但详情页的样式可能已经注入到 <head> 里。如果两个页面的 data-v 哈希值恰好相同（概率极低，但 Vue 的哈希是基于文件路径和内容生成的，如果两个文件内容完全一样，哈希就会一样），那样式就会彻底混在一起。我遇到过两次，一次是复制粘贴组件忘了改内容，另一次是用了同一个 render 函数生成两个页面。所以别偷懒，复制组件后至少改个类名。

最后说个真事。我们团队有个项目，列表页和详情页都用了 .status-tag，列表页是绿色背景，详情页是灰色背景。测试环境一直没问题，上线后用户反馈“详情页的状态标签怎么是绿的”。查了半小时，发现是列表页的样式在路由切换时没被移除，因为 keep-alive 的 include 配置写错了，把详情页也缓存了。两个页面的 .status-tag 同时存在，后加载的样式覆盖了先加载的。改法很简单：给 keep-alive 加个 exclude，或者给两个页面的 .status-tag 加不同的父级类名。但这个问题暴露了一个事实：Vue 的样式隔离不是自动的，你得自己管。

(责任编辑：休闲)