前端面试题刷（21-30）

21. React 中为什么不直接使用 requestIdleCallback？

requestIdleCallback 是一个 Web API，它允许开发者注册一个回调函数，该函数将在浏览器的空闲时段执行。这使得开发者能够在不影响用户体验的情况下执行一些低优先级的任务，例如数据处理或后台任务。

然而，React 选择不直接使用原因 requestIdleCallback 有几个：

1. 兼容性问题：

   • requestIdleCallback 的浏览器支持程度并不是非常高，特别是在一些旧版本的浏览器中。React 作为一个广泛使用的库，需要考虑到广泛的浏览器兼容性问题，而 requestIdleCallback 在一些浏览器中可能不可用或行为不稳定。

2. 性能优化：

   • React 的 Fiber 架构已经实现了任务的优先级调度，它可以根据任务的重要性和紧急程度来安排任务的执行顺序。这意味着即使没有 requestIdleCallback，React 也能够有效地管理渲染任务，确保高优先级的任务（如用户交互）得到及时处理。

3. API 设计：

   • React 的更新机制是基于虚拟 DOM 的比较和补丁应用，这与 requestIdleCallback 所提供的空闲时段执行模型不太匹配。React 需要确保更新是及时且一致的，而 requestIdleCallback 的执行时机是不确定的，这可能导致更新延迟或不一致。

4. 框架一致性：

   • React 的更新机制与其整体框架设计紧密相关，使用 requestIdleCallback 可能会打破现有的更新流程，增加框架的复杂性。React 通过自身的调度机制来处理任务的优先级，这比依赖外部 API 更加可靠和可控。

5. 低优先级任务的处理：

   • React 的 Fiber 架构本身就能够处理低优先级的任务。通过将工作分割成小块并在空闲时段逐步完成，React 已经能够实现类似 requestIdleCallback 的功能。此外，React 还提供了 useTransition Hook，允许开发者标记某些更新为低优先级，从而在不影响用户体验的情况下执行这些更新。

React 如何处理低优先级任务

React 通过以下方式处理低优先级任务：

• Fiber 架构：Fiber 允许 React 将工作分解成更小的任务，并在浏览器的空闲时间执行这些任务。
• useTransition Hook：此 Hook 允许开发者标记某些更新为低优先级，从而在不影响用户体验的情况下执行这些更新。
• 自定义调度：React 提供了自定义调度的能力，允许开发者根据自己的需求调整任务的执行顺序。

总之，虽然 requestIdleCallback 提供了一种在浏览器空闲时段执行任务的方式，但 React 通过其内部机制已经能够有效地处理各种优先级的任务，因此没有必要直接使用 requestIdleCallback。对于那些需要在空闲时段执行的任务，React 提供了更加集成和一致的方式来处理。

22. MessageChannel 是什么，有什么使用场景

MessageChannel 是 HTML5 Web Workers API 的一部分，它允许在不同的线程或上下文之间进行异步消息传递。MessageChannel 本质上是一个通信管道，它包含两个端点，这两个端点通常被称为 MessagePort。通过 MessagePort，你可以发送消息到另一个端点，并且监听从另一个端点发送过来的消息。

MessageChannel 的基本使用

MessageChannel 通常通过 window.postMessage 和 window.addEventListener('message') 来实现消息的发送和接收。但是，MessageChannel 提供了一种更加直接的通信方式，它允许创建一个双向的通信通道。

创建 MessageChannel

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;

发送消息

port1.postMessage('Hello from port1');

接收消息

port2.onmessage = function(event) {
  console.log('Received message:', event.data);
};

使用场景

MessageChannel 有多种使用场景，包括但不限于：

1. Web Workers 通信：

   • 主线程与 Web Worker 之间进行通信。
   • Web Worker 之间进行通信。

2. 跨窗口或跨文档通信：

   • 父窗口与子窗口（如弹出窗口或 iframe）之间的通信。
   • 多个 iframe 之间的通信。

3. 实现事件总线：

   • 在不同的脚本上下文中实现事件的订阅和发布机制。

4. 实现深拷贝：

   • 利用 MessageChannel 的消息传递机制，可以实现对象的深拷贝。因为 postMessage 方法会自动进行结构化克隆，这可以处理循环引用并且可以拷贝大部分的 JS 对象。

5. 异步任务调度：

   • 通过 MessageChannel 可以实现异步任务的调度，类似于使用 setTimeout 或 Promise，但提供了更多的灵活性。

6. 跨域通信：

   • 虽然 MessageChannel 本身并不直接支持跨域通信，但它可以结合其他技术（如 CORS 或者 JSONP）来实现跨域的消息传递。

示例：实现深拷贝

利用 MessageChannel 实现深拷贝的一个简单示例：

function deepClone(obj) {
  return new Promise((resolve) => {
    const channel = new MessageChannel();
    const worker = new Worker(new URL('worker.js', import.meta.url));

    worker.postMessage(obj, [channel.port1]);
    channel.port2.onmessage = e => resolve(e.data);
  });
}

// worker.js 文件内容
self.onmessage = function(event) {
  self.postMessage(event.data, [event.ports[0]]);
};

在这个示例中，我们创建了一个 MessageChannel 并将其的一个端口传递给了一个新的 Worker。Worker 接收到消息后，将消息原封不动地通过 MessageChannel 的另一个端口发送回去，这样就实现了一个深拷贝。

总结

MessageChannel 提供了一种在不同线程或上下文之间进行通信的方式，它的主要优点在于可以直接创建一个双向通信的通道，并且可以利用它来实现一些高级的功能，如事件总线、深拷贝等。在现代 Web 开发中，MessageChannel 成为了一个有用的工具，尤其是在需要处理复杂的多线程通信场景时。

23. react 和 react-dom 是什么关系？

react 和 react-dom 是两个紧密相关的但又有所区别的 npm 包，它们都是 React 生态系统的一部分。理解它们之间的关系有助于更好地掌握如何使用 React 来构建用户界面。

react 包

react 包包含了 React 的核心功能，包括组件声明、状态管理和生命周期方法等。它是构建任何 React 应用的基础，无论是在浏览器还是在服务器上运行。react 包提供了创建组件所需的基本 API，比如 React.Component 类、React.createElement 方法以及 React.createRef 等。

react-dom 包

react-dom 包则是专门针对浏览器环境的 React 实现。它包含了所有与浏览器 DOM 相关的方法，例如 ReactDOM.render()，用于将 React 组件渲染到 DOM 节点中。此外，react-dom 还提供了服务器端渲染的支持，如 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup() 方法，这些方法可以将 React 组件转换为可以在服务器上生成的 HTML 字符串。

关系

1. 依赖关系：

   • react-dom 依赖于 react 包，这意味着你需要先安装 react 包才能使用 react-dom。这是因为 react-dom 包中的一些方法需要访问 react 包中的核心功能。

2. 功能划分：

   • react 负责处理组件的声明周期、状态管理和渲染逻辑，它是一个通用的库，可以用于不同的平台，如 Web 浏览器、React Native（移动应用）或 Electron（桌面应用）。
   • react-dom 专注于 DOM 特定的操作，如渲染 React 组件到 DOM 节点，以及提供与浏览器环境相关的 API。

3. 使用场景：

   • 如果你正在开发一个 Web 应用程序，那么你将同时使用 react 和 react-dom 包。
   • 如果你在开发一个不涉及浏览器 DOM 的应用，比如一个 React Native 应用，那么你只需要 react 包即可。

示例

假设你有一个简单的 React 应用，你会这样使用 react 和 react-dom：

javascript
// 导入 react 包
import React from 'react';
// 导入 react-dom 包
import ReactDOM from 'react-dom';

// 定义一个简单的 React 组件
const App = () => {
  return <h1>Hello, World!</h1>;
};

// 使用 react-dom 包中的 render 方法将组件渲染到 DOM 中
ReactDOM.render(<App />, document.getElementById('root'));

总结

react 和 react-dom 之间的关系可以概括为：react 是 React 的核心库，提供了创建和管理组件所需的所有功能；而 react-dom 是 react 在浏览器环境下的具体实现，提供了将 React 组件渲染到 DOM 上的方法。两者结合使用，可以让你构建出高性能的 Web 应用程序。

24. React Portals 有什么用？

React Portals 是 React 提供的一种特殊的渲染方式，它允许你将一个子组件树渲染到位于父组件之外的 DOM 节点中。尽管子组件树被渲染到了其他位置，但它仍然属于整个 React 组件树的一部分，并且可以参与 React 的更新机制。

React Portals 的主要作用

1. 处理全局 UI 元素：

   • React Portals 最常见的使用场景之一就是创建全局的 UI 元素，如模态框、弹出层、工具提示等。这些元素通常需要浮在应用的其他组件之上，并且不受组件嵌套结构的影响。

   例如，如果你有一个模态框组件，你可能希望它总是显示在最顶层，而不受当前激活的组件层级影响。使用 Portals 可以轻松实现这一点。

2. DOM 结构的分离：

   • 有时候，你可能希望将某些组件的 DOM 结构与页面的其余部分分离出来。例如，为了性能考虑，你可能希望将一些复杂的动画或图表放在一个特定的 DOM 节点中，而不是嵌套在组件树中。

3. 解决层级嵌套问题：

   • 当你需要在层级较深的组件树中插入一个组件，而又不想改变现有组件结构时，Portals 可以帮助你实现这一点。例如，你可能想在任何地方插入一个浮动菜单或对话框，而无需修改现有组件的嵌套结构。

如何使用 React Portals

使用 React.createPortal 函数来创建一个 Portal。这个函数接受两个参数：第一个是要渲染的内容（通常是 JSX），第二个是要挂载这个内容的 DOM 节点。

示例

jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  // 获取一个 DOM 节点，通常这个节点位于 HTML 文档的 body 内
  const modalRoot = document.getElementById('modal-root');

  if (!isOpen) {
    return <button onClick={openModal}>Open Modal</button>;
  }

  return ReactDOM.createPortal(
    <div>
      <p>I am a modal</p>
      <button onClick={closeModal}>Close Modal</button>
    </div>,
    modalRoot
  );
}

ReactDOM.render(
  <Modal />,
  document.getElementById('root')
);

在这个例子中，当点击 "Open Modal" 按钮时，模态框会被渲染到一个 ID 为 modal-root 的 DOM 节点中，而不是当前组件树中的任何位置。这使得模态框可以始终位于页面的最顶层，不受其他组件的影响。

总结

React Portals 提供了一种灵活的方式来渲染组件，使得你可以将组件渲染到 DOM 树中的任何位置，而不仅仅是组件所在的 DOM 层级内。这对于创建全局 UI 元素、处理 DOM 结构的分离以及解决层级嵌套问题都非常有用。通过使用 Portals，你可以更加自由地组织你的组件结构，同时保持良好的用户体验。

25. try...catch 可以捕获到异步代码中的错误吗？

try...catch 语句主要用于捕获同步代码中的错误。然而，对于异步代码中的错误，try...catch 通常无法直接捕获。这是因为异步代码的执行发生在稍后的某个时间点，而此时 try...catch 的作用域已经结束。

异步代码中的错误处理

在 JavaScript 中，异步代码通常通过以下几种方式来处理错误：

1. Promise 错误处理：

   • 使用 .catch() 方法来捕获 Promise 中的错误。
   • 使用 .finally() 方法来执行无论成功还是失败都会执行的代码。

2. async/await 语法：

   • 使用 try...catch 语句来捕获 await 后面的 Promise 中的错误。

3. 事件监听器：

   • 使用 unhandledrejection 事件来捕获未处理的 Promise 错误。

示例

1. 使用 Promise 错误处理

javascript
function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟异步错误
      reject(new Error('Async error occurred'));
    }, 1000);
  });
}

asyncFunction()
  .then(result => {
    console.log('Success:', result);
  })
  .catch(error => {
    console.error('Error:', error.message);
  })
  .finally(() => {
    console.log('Finally block');
  });

2. 使用 async/await 语法

javascript
async function asyncFunction() {
  try {
    const result = await new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟异步错误
        reject(new Error('Async error occurred'));
      }, 1000);
    });

    console.log('Success:', result);
  } catch (error) {
    console.error('Error:', error.message);
  } finally {
    console.log('Finally block');
  }
}

asyncFunction();

3. 使用 unhandledrejection 事件

javascript
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
});

function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟异步错误
      reject(new Error('Async error occurred'));
    }, 1000);
  });
}

asyncFunction()
  .then(result => {
    console.log('Success:', result);
  })
  .catch(error => {
    console.error('Caught error:', error.message);
  });

为什么 try...catch 不能捕获异步错误？

1. 执行时机：

   • try...catch 语句只能捕获在 try 块内同步抛出的错误。
   • 异步代码的执行发生在 try...catch 块之外，因此无法被捕获。

2. Promise 机制：

   • 异步代码通常通过 Promise 来处理，而 Promise 的错误处理机制是通过 .catch() 方法来实现的。

总结

• 同步代码：try...catch 语句可以捕获同步代码中的错误。
• 异步代码：try...catch 语句无法直接捕获异步代码中的错误。对于异步代码中的错误，应使用 Promise 的 .catch() 方法或 async/await 语法中的 try...catch 语句来处理。

通过合理使用 Promise 和 async/await 语法，你可以有效地处理异步代码中的错误，确保应用程序的健壮性和稳定性。

26. 说说你对渐进式框架的理解

渐进式框架（Progressive Framework）是一种设计思想和技术方案，旨在使框架具有更高的灵活性和可扩展性，以便开发者可以根据实际需求逐步引入和使用框架的不同部分。这种框架设计方式允许开发者按需加载和使用框架的功能，从而提高性能和开发效率。

渐进式框架的特点

1. 模块化：

   • 渐进式框架通常采用模块化的设计，每个模块负责特定的功能。开发者可以选择性地引入所需的模块，而不是一次性加载整个框架。

2. 按需加载：

   • 渐进式框架支持按需加载，即只加载当前需要的功能模块。这有助于减少初始加载时间和资源消耗，提高应用性能。

3. 渐进增强：

   • 渐进式框架允许开发者逐步增强应用的功能。开发者可以从简单的功能开始，随着需求的增长逐步添加更多的功能和复杂性。

4. 灵活性：

   • 渐进式框架提供了高度的灵活性，开发者可以根据项目的具体需求选择合适的模块和功能，而不是被迫使用整个框架的所有功能。

渐进式框架的例子

1. Vue.js：

   • Vue.js 是一个典型的渐进式框架。它可以作为一个轻量级的视图层开始使用，然后逐渐引入更多的功能模块，如 Vuex（状态管理）、Vue Router（路由管理）等。
   • 开发者可以从一个简单的 Vue 单文件组件（SFC）开始，然后逐步引入 Vuex 和 Vue Router 等高级功能。

2. Angular：

   • Angular 也支持渐进式的开发方式。虽然 Angular 本身是一个功能齐全的框架，但开发者可以选择性地引入特定的模块和功能。
   • 例如，开发者可以从一个简单的 Angular 组件开始，然后逐步引入 NgRx（状态管理）和 Angular Router 等高级功能。

3. React：

   • React 本身是一个库，而不是一个完整的框架。开发者可以选择性地引入 React Router、Redux 等库来增强功能。
   • React 的核心库只关注组件化和虚拟 DOM，其他功能可以通过第三方库来实现。

渐进式框架的优势

1. 性能优化：

   • 渐进式框架通过按需加载和模块化设计，可以显著减少初始加载时间和资源消耗，从而提高应用性能。

2. 易于学习和上手：

   • 开发者可以从简单的功能开始，逐步学习和引入更复杂的功能。这降低了学习曲线，使得新开发者更容易上手。

3. 灵活性和可扩展性：

   • 渐进式框架提供了高度的灵活性，可以根据项目需求选择合适的模块和功能，避免了不必要的功能负担。

4. 更好的维护性：

   • 由于模块化设计，渐进式框架更容易维护和升级。开发者可以单独更新或替换特定模块，而不影响整个应用。

实际应用场景

1. 单页面应用（SPA） ：

   • 在 SPA 中，渐进式框架可以按需加载不同的路由模块，减少首次加载时间，提高用户体验。

2. 渐进式 Web 应用（PWA） ：

   • PWA 通常采用渐进式框架，通过 Service Worker 和按需加载技术，实现离线访问和快速加载。

3. 大型企业应用：

   • 大型企业应用通常需要逐步引入新的功能模块，渐进式框架可以更好地适应这种需求。

总结

渐进式框架通过模块化设计和按需加载技术，提供了更高的灵活性和可扩展性。开发者可以根据实际需求逐步引入和使用框架的不同部分，从而提高应用性能和开发效率。Vue.js、Angular 和 React 都是典型的渐进式框架，它们在实际应用中表现出色，能够满足不同规模和复杂度的项目需求。

27. vue的祖孙组件的通信方案有哪些？

Vue 中的祖孙组件通信指的是在一个组件树中，祖父组件（Grandparent）需要与孙子组件（Grandchild）进行通信。这种通信通常涉及到跨越多个层级的组件，因此需要特别的策略来实现。以下是 Vue 中常用的几种祖孙组件通信方案：

1. 通过中间组件传递：

   • 祖父组件可以通过中间的父组件（Parent）作为中介，使用 props 向孙子组件传递数据。
   • 孙子组件也可以通过触发事件，让父组件捕捉到并向上层（祖父组件）传递。

2. provide/inject：

   • Vue 提供了 provide 和 inject 机制，允许从祖父组件向下注入数据或方法，直到孙子组件。
   • 祖父组件在其选项中使用 provide 方法提供数据或方法，孙子组件则使用 inject 来接收这些值。

   javascript
   // 祖父组件
   export default {
     provide() {
       return {
         grandpaData: this.someData,
         updateGrandpaData: this.updateSomeData
       };
     },
     data() {
       return {
         someData: 'Hello from Grandpa'
       };
     },
     methods: {
       updateSomeData(newVal) {
         this.someData = newVal;
       }
     }
   };
   
   // 孙子组件
   export default {
     inject: ['grandpaData', 'updateGrandpaData'],
     mounted() {
       console.log(this.grandpaData); // 输出 'Hello from Grandpa'
     }
   };
   

3. Vuex：

   • 如果应用足够大，通常推荐使用 Vuex 进行状态管理。通过 Vuex，祖父组件可以修改 store 中的状态，孙子组件可以监听这些状态的变化。
   • Vuex 适用于大规模应用的状态管理，能够很好地处理跨组件的数据共享。

4. Event Bus：

   • 创建一个全局的事件中心（Event Bus），祖父组件可以通过它触发事件，孙子组件监听这些事件。
   • 这种方式适用于较小的应用或特定情况下，不推荐在大型应用中过度使用，以免导致组件间的耦合度过高。

   javascript
   // 创建 EventBus
   import Vue from 'vue';
   export const EventBus = new Vue();
   
   // 祖父组件触发事件
   EventBus.$emit('grandpa-event', 'Hello from Grandpa');
   
   // 孙子组件监听事件
   EventBus.$on('grandpa-event', message => {
     console.log(message); // 输出 'Hello from Grandpa'
   });
   

5. Props + Callbacks：

   • 祖父组件通过 props 向孙子组件传递数据，并且孙子组件可以通过一个回调函数（作为 prop 传递给孙子组件）来通知祖父组件。
   • 这种方式适用于需要从孙子组件向祖父组件传递数据的情况。

6. Ref：

   • 祖父组件可以通过 $refs 访问孙子组件实例，进而直接调用孙子组件的方法或访问其属性。
   • 但是这种方式破坏了组件之间的独立性，应该谨慎使用。

每种方案都有其适用的场景和限制，选择哪种方案取决于具体的应用需求和组件之间的通信复杂度。在实际开发中，通常会结合使用多种方案来满足不同的通信需求。

28. 如何打破 scope 对样式隔离的限制？

在 Vue 中，scoped 样式的设计目的是为了实现组件内部样式的隔离，以防止样式污染和冲突。然而，在某些情况下，你可能需要打破这种隔离，使样式能够影响到子组件或其他元素。下面是一些打破 scoped 样式隔离限制的方法：

1. 使用 /deep/ 或 ::v-deep

在 Vue 2.x 中，你可以使用 /deep/ 或 ::v-deep 伪类选择器来穿透样式隔离，选择子组件中的元素。在 Vue 3.x 中，::v-deep 已经被弃用，推荐使用 /deep/。

示例

html
<style scoped>
  /* Vue 2.x */
  ::v-deep .child-component-class {
    color: red;
  }

  /* Vue 3.x */
  /deep/ .child-component-class {
    color: blue;
  }
</style>

注意：在 Vue 3 中，::v-deep 已经不再推荐使用，而是建议使用 /deep/。然而，Vue 团队已经在考虑移除 /deep/，因为它可能会带来一些难以调试的问题。因此，在未来版本中，可能需要寻找替代方案。

2. 使用全局样式

如果确实需要在多个组件之间共享样式，可以考虑将样式定义为全局样式，而不是使用 scoped 特性。这意味着将样式放在 <style> 标签外，或者在全局样式表中定义。

示例

css
/* global.css */
.child-component-class {
  color: green;
}

3. 在子组件中使用 !important

虽然这不是一个好的实践，但在某些情况下，你可能需要在子组件中使用 !important 来覆盖父组件中的样式。

示例

html
<!-- 子组件 -->
<style>
  .child-component-class {
    color: orange !important;
  }
</style>

4. 使用 CSS Modules

CSS Modules 是一种将 CSS 类映射到局部范围内的机制，它允许你使用局部作用域的类名，同时仍然可以使用全局选择器来选择元素。通过这种方式，你可以更细粒度地控制样式的隔离和穿透。

示例

html
<!-- 父组件 -->
<template>
  <div :class="styles.parentComponentClass">
    <ChildComponent />
  </div>
</template>

<style module>
  parentComponentClass {
    color: purple;
  }
</style>

5. 不使用 scoped 属性

如果不需要样式隔离，可以选择不使用 scoped 属性，这样定义的样式就会成为全局样式。

总结

• /deep/  或  ::v-deep：用于穿透样式隔离，选择子组件中的元素。
• 全局样式：定义全局样式，适用于需要在多个组件间共享的样式。
• !important：不推荐使用，但在某些特殊情况下可以用来覆盖样式。
• CSS Modules：提供更细粒度的样式控制。
• 不使用 scoped：如果不需要样式隔离，则可以不使用 scoped 属性。

在选择打破样式隔离的方法时，请考虑其对组件的可维护性和可复用性的影响。尽量避免过度使用穿透选择器，因为这可能会导致样式难以管理和维护。在可能的情况下，优先考虑使用全局样式或 CSS Modules 来达到目的。

29. Scoped Styles 为什么可以实现样式隔离？

Scoped Styles 在 Vue 中实现样式隔离的主要原理是通过编译时的变换来确保样式仅应用于定义它的组件内部。这种方式可以有效防止样式污染，使得组件之间的样式不会相互干扰。下面是 Scoped Styles 实现样式隔离的具体机制：

编译时变换

当 Vue 编译包含 scoped 属性的 <style> 标签时，它会对样式规则进行修改，使得这些样式规则仅作用于当前组件的模板中的元素。具体来说，Vue 会在编译时为每个元素生成一个唯一的哈希标识符，并将其作为类名附加到对应的元素上。这样，即使两个组件使用了相同的类名，它们也不会相互影响，因为每个类名实际上都被加上了一个唯一的前缀。

示例

假设我们有以下组件：

html
<template>
  <div class="box">
    <p class="text">Hello, Vue!</p>
  </div>
</template>

<style scoped>
  .box {
    background-color: lightblue;
  }

  .text {
    color: red;
  }
</style>

编译后，Vue 会生成类似于这样的 HTML：

html
<div class="_1234567890 box">
  <p class="_1234567890 text">Hello, Vue!</p>
</div>

这里的 _1234567890 是一个由 Vue 自动生成的唯一标识符，它保证了 .box 和 .text 类名仅在当前组件中有效。

伪选择器

在 Vue 2.x 中，为了兼容旧的浏览器，Vue 使用了伪选择器 /deep/ 或 ::v-deep 来穿透样式隔离。这些伪选择器告诉 Vue 忽略样式隔离，并将样式应用到子组件中。然而，在 Vue 3.x 中，这些伪选择器已经被移除，推荐使用 /deep/。

优点

• 样式隔离：每个组件的样式只作用于该组件的模板，不会影响到其他组件。
• 可维护性：每个组件的样式被限定在组件内部，使得样式更容易维护和管理。
• 可复用性：组件可以独立于其他组件复用，不用担心样式冲突问题。

缺点

• 穿透样式：有时需要使用 /deep/ 或 ::v-deep 来穿透样式隔离，这可能导致样式难以追踪和调试。
• 性能开销：编译时生成唯一的哈希标识符可能会增加一定的性能开销，尤其是在大型应用中。

总结

Scoped Styles 通过在编译时为每个组件的样式规则添加唯一的哈希标识符来实现样式隔离。这种方式确保了每个组件的样式仅作用于该组件的模板，从而避免了样式污染的问题。虽然这种方法带来了更好的可维护性和可复用性，但也需要注意穿透样式的选择器可能导致的调试困难。在实际开发中，应根据具体情况权衡是否使用 scoped 样式，以及如何处理穿透样式的需求。

30. vue 中怎么实现样式隔离？

在 Vue 中实现样式隔离主要有以下几种方法：

1. 使用 scoped 属性

最常用也是最推荐的方法是在组件的 <style> 标签中添加 scoped 属性。这会让 Vue 在编译时自动为组件中的每个 CSS 规则添加一个唯一的类名前缀，从而确保这些样式仅应用于该组件内部。

示例

html
<template>
  <div class="box">
    <p class="text">Hello, Vue!</p>
  </div>
</template>

<style scoped>
  .box {
    background-color: lightblue;
  }

  .text {
    color: red;
  }
</style>

编译后，生成的实际 CSS 选择器会类似于：

css
._uniqueHash_box {
  background-color: lightblue;
}

._uniqueHash_text {
  color: red;
}

这里的 _uniqueHash 是由 Vue 自动生成的唯一哈希值，确保了样式不会与其他组件发生冲突。

2. 使用 CSS Modules

CSS Modules 允许你将 CSS 类名定义为本地作用域，只在该组件中使用。Webpack 等构建工具可以生成具有唯一类名的 CSS 文件。这种方式同样可以实现样式隔离。

示例

首先，你需要创建一个 CSS 文件，比如 styles.module.css：

css
/* styles.module.css */
.box {
  background-color: lightblue;
}

.text {
  color: red;
}

然后在 Vue 组件中导入并使用：

html
<template>
  <div :class="styles.box">
    <p :class="styles.text">Hello, Vue!</p>
  </div>
</template>

<script>
import styles from './styles.module.css';

export default {
  name: 'MyComponent',
  computed: {
    ...styles
  }
};
</script>

3. 使用 BEM（Block Element Modifier）命名约定

虽然 BEM 不是直接实现样式隔离的技术，但它是一种组织 CSS 类名的方式，有助于创建可重复使用、模块化的样式。通过使用嵌套类名来表示组件的不同部分，可以帮助保持样式组织和隔离。

示例

html
<template>
  <div class="my-component">
    <p class="my-component__text">Hello, Vue!</p>
  </div>
</template>

<style>
.my-component {
  background-color: lightblue;
}

.my-component__text {
  color: red;
}
</style>

4. 直接在组件模板中使用内联样式

虽然这不是一种推荐的做法，但在某些情况下，你可以在组件模板中直接使用内联样式来确保样式仅作用于当前组件。

示例

html
<template>
  <div style="background-color: lightblue;">
    <p style="color: red;">Hello, Vue!</p>
  </div>
</template>

总结

• 使用 scoped 属性：这是最简单且最推荐的方法，通过编译时的变换来实现样式隔离。
• CSS Modules：适合需要更细粒度控制的情况，可以生成具有唯一类名的 CSS 文件。
• BEM 命名约定：虽然不是直接实现样式隔离的技术，但有助于组织和管理样式。
• 内联样式：不推荐使用，但在某些特殊情况下可以作为一种解决方案。

在实际开发中，推荐使用 scoped 属性来实现样式隔离，因为它既简单又有效。如果需要更复杂的样式管理，可以考虑使用 CSS Modules。