面试题：Vue项目中如何突破scoped CSS限制实现全局样式影响局部

Question

在一个Vue组件中使用了scoped CSS，现在有一个需求，需要让全局样式表中的某个类名在该组件内生效，应该采取哪些方式来实现？同时分析每种方式的优缺点及适用场景。

Answer 1

方式一：使用深度选择器（>>>, /deep/ 或 ::v-deep）

1. 实现方法：在组件的 scoped CSS 中，通过深度选择器来引用全局样式类。例如：

/* 全局样式 */
.global - class {
  color: red;
}
/* 组件内 scoped CSS */
::v - deep .global - class {
  /* 这里可以对全局样式类进一步调整 */
}

2. 优点：
   • 简单直接，不需要额外引入其他工具或配置。
   • 可以在组件内部对全局样式类进行特定的调整，保持样式的局部可定制性。
3. 缺点：
   • 不同的深度选择器（>>>, /deep/ 和 ::v - deep）兼容性不同，例如 >>> 和 /deep/ 在某些浏览器中存在兼容性问题，需要考虑兼容性处理。
   • 这种方式打破了 scoped CSS 的封装性，可能会对其他组件产生意想不到的影响，特别是当多个组件都对同一个全局样式类使用深度选择器时。
4. 适用场景：适用于只在个别组件中对全局样式类进行微调，并且对兼容性有一定控制的场景，比如在现代浏览器环境中开发的项目。

方式二：不使用 scoped，直接在组件中引入全局样式

1. 实现方法：移除 <style scoped> 标签中的 scoped 属性，然后在组件的 <style> 标签内直接写全局样式类的样式。

<style>
  /* 这里可以直接引用全局样式类 */
 .global - class {
    /* 样式 */
  }
</style>

2. 优点：
   • 简单易懂，直接避免了 scoped CSS 带来的限制。
   • 样式作用范围明确，对于简单组件，不会产生封装相关的困扰。
3. 缺点：
   • 完全失去了 scoped CSS 的样式封装性，样式可能会影响到其他组件，导致样式冲突的风险增加。
   • 不利于大型项目中样式的模块化管理，特别是当多个组件都有类似样式需求时，样式维护成本会增加。
4. 适用场景：适用于非常简单的组件，或者在项目初期快速搭建原型阶段，对样式隔离要求不高的场景。

方式三：通过 JavaScript 动态添加类名

1. 实现方法：在组件的 mounted 生命周期钩子函数中，通过操作 DOM 动态为元素添加全局样式类。

<template>
  <div ref="targetDiv">内容</div>
</template>

<script>
export default {
  mounted() {
    this.$refs.targetDiv.classList.add('global - class');
  }
}
</script>

2. 优点：
   • 精确控制全局样式类应用的时机和元素，更加灵活。
   • 不影响 CSS 的封装性，不会对其他组件造成样式干扰。
3. 缺点：
   • 需要编写额外的 JavaScript 代码，增加了代码的复杂性。
   • 当需要频繁切换全局样式类的应用时，性能可能会受到一定影响。
4. 适用场景：适用于根据特定条件（如用户操作、数据变化等）动态决定是否应用全局样式类的场景，例如根据用户登录状态显示不同样式的按钮。