面试题：CSS在React与Vue框架中组件化开发的异同点

React常用CSS组件化开发方式

styled - components：
- 原理：通过JavaScript函数来创建样式组件，将样式直接写在JavaScript文件中，利用模板字符串来定义CSS样式。例如：

import styled from'styled - components';

const Button = styled.button`
  background - color: blue;
  color: white;
  padding: 10px 20px;
`;

function App() {
  return <Button>Click me</Button>;
}

- **特点**：
    - **组件化程度高**：样式与组件紧密绑定，每个样式组件都是独立的，便于维护和复用。
    - **动态样式方便**：可以通过传递props来动态改变样式，例如根据不同的状态改变按钮颜色。

2. CSS Modules： - 原理：将CSS文件中的类名进行局部作用域处理，通过引入CSS文件，生成一个包含类名映射的对象。例如：

import styles from './styles.module.css';

function App() {
  return <div className={styles.container}>Hello</div>;
}

- **特点**：
    - **避免样式冲突**：每个组件的CSS类名都是唯一的，不会与其他组件的类名产生冲突。
    - **易于理解**：CSS语法与传统CSS相似，开发人员容易上手。

Vue常用CSS组件化开发方式

scoped样式： - 原理：在Vue单文件组件中，通过<style scoped>标签来使该组件的CSS样式只作用于当前组件。Vue会自动为当前组件的DOM元素添加一个独一无二的属性（例如data - v - hash），并将这个属性添加到样式选择器中，从而实现样式的局部作用域。例如：

<template>
  <div class="container">Hello</div>
</template>

<style scoped>
.container {
  color: red;
}
</style>

- **特点**：
    - **简单直观**：无需额外配置，在单文件组件内直接书写样式，且天然实现样式隔离。
    - **性能较好**：相比于一些JavaScript - in - CSS的方案，无需在运行时动态生成样式，渲染性能较高。

相同点

样式隔离：styled - components、CSS Modules和Vue的scoped样式都致力于实现组件级别的样式隔离，避免全局样式污染，使各个组件的样式相互独立，提高代码的可维护性。
组件化开发：都服务于组件化开发模式，让样式与组件紧密结合，随着组件的复用，样式也能一同复用。

不同点

语法和书写方式：
- styled - components：是JavaScript - in - CSS的方式，完全在JavaScript中书写CSS，对于熟悉JavaScript的开发者友好，但对纯CSS开发者有一定学习成本。
- CSS Modules：保持了CSS的基本语法，只是通过引入机制和类名处理来实现局部作用域，更接近传统CSS开发方式。
- Vue scoped样式：在Vue单文件组件中直接书写CSS，语法与传统CSS一致，并且无需额外引入操作，对于前端开发者容易理解和上手。
动态性：
- styled - components：动态样式非常灵活，通过props可以轻松实现根据组件状态或属性改变样式。
- CSS Modules：动态改变样式相对麻烦，一般需要借助JavaScript操作类名来实现。
- Vue scoped样式：动态样式可以通过Vue的响应式系统结合计算属性等方式实现，灵活性介于styled - components和CSS Modules之间。
性能：
- styled - components：在运行时需要动态生成样式，可能会有一些性能开销。
- CSS Modules：性能较好，因为类名映射在构建时完成，运行时开销较小。
- Vue scoped样式：性能也较好，样式在构建时添加作用域属性，运行时直接渲染。

星途面试题库

面试题：CSS在React与Vue框架中组件化开发的异同点

知识考点

面试题答案

React常用CSS组件化开发方式

Vue常用CSS组件化开发方式

相同点

不同点