2025面试大全（10）1. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？在JavaSc

1. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？

在JavaScript中，var [a, b] = {a: 1, b: 2} 这种写法默认是会报错的，因为数组解构的语法是用于解构数组，而对象字面量 {a: 1, b: 2} 是一个对象，不是数组。数组解构的语法期望右边是一个可迭代对象，比如数组或字符串。为了让类似的解构赋值成功，你需要确保右边的值是一个可迭代对象。但是，如果你想要从对象中提取属性并赋值给变量，你应该使用对象解构的语法，而不是数组解构。下面是使用对象解构的正确方式：

var {a, b} = {a: 1, b: 2};

这样，a 会被赋值为 1，b 会被赋值为 2。如果你坚持要使用数组解构的语法形式，并且想要从对象中提取值，你可以先将对象的键转换为数组，然后再进行解构。但这通常不是推荐的做法，因为它增加了复杂性并且不够直观。下面是一个可能的实现方式：

var obj = {a: 1, b: 2};
var keys = Object.keys(obj); // ['a', 'b']
var values = keys.map(key => obj[key]); // [1, 2]
var [a, b] = values;

在这个例子中，我们首先获取了对象的所有键，然后将这些键映射到它们的对应值，从而得到了一个数组。最后，我们使用数组解构来从这个数组中提取值。然而，这种做法并不常见，也不推荐。通常，如果你要处理对象属性，最好直接使用对象解构。

2. React 为什么要废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate 这三个生命周期钩子？它们有哪些问题呢？React 又是如何解决的呢？

React废弃componentWillMount、componentWillReceiveProps、componentWillUpdate这三个生命周期钩子的原因及问题：

问题一：同步操作与异步渲染的冲突
- 在React 16.3之前的版本中，这些生命周期钩子是在组件渲染过程中同步调用的。但随着React引入异步渲染机制（如Fiber架构），这些同步操作可能会打断异步渲染，导致性能问题。
- 例如，在componentWillMount中进行异步数据请求，可能会在组件还未实际挂载到DOM时就触发渲染，导致不必要的渲染或内存泄漏。
问题二：不确定性及难以管理
- 这些生命周期钩子在实际使用中往往承担了过多的责任，如数据获取、状态更新、副作用处理等，导致代码逻辑变得复杂且难以管理。
- 同时，由于它们在组件更新过程中的多次调用，容易引发难以追踪的bug。
问题三：与新的渲染模式不兼容
- 随着React引入新的渲染模式（如并发模式），这些生命周期钩子的行为变得不再可靠。例如，在并发模式下，组件的渲染和更新可能会被中断和重新开始，导致这些生命周期钩子被多次或不正确地调用。 React的解决方案：
引入新的生命周期钩子
- getDerivedStateFromProps：这是一个静态方法，用于替代componentWillReceiveProps。它允许我们在组件接收到新的props时更新state，但不会导致额外的渲染。
- getSnapshotBeforeUpdate：用于替代componentWillUpdate。它允许我们在组件更新前获取DOM的快照，以供 componentDidUpdate 使用。
推荐使用函数式组件和Hooks
- React 16.8引入了Hooks，如useState、useEffect等，为函数式组件提供了类似类组件生命周期钩子的功能，但更为灵活和易于管理。
- 例如，使用useEffect可以替代componentDidMount、componentDidUpdate和componentWillUnmount，用于处理副作用和异步操作。
优化渲染性能
- 通过引入Fiber架构和并发模式，React优化了渲染性能，减少了不必要的渲染和中断，使得组件的更新更加平滑和高效。总的来说，React废弃这些生命周期钩子是为了更好地适应新的渲染模式和提高性能，同时通过引入新的API和推荐使用Hooks来提供更现代、更灵活的替代方案。

3. css 中的 animation、transition、transform 有什么区别？

animation、transition和transform是CSS中用于创建动画和过渡效果的三个重要属性，它们各自有不同的用途和特点：

1. `transition`（过渡）

用途：transition用于在CSS属性发生变化时创建平滑的过渡效果。
特点：
- 需要一个触发条件，比如伪类:hover、:focus或者JavaScript动态改变属性。
- 只能定义开始状态和结束状态，中间的过程由浏览器自动计算。
- 可以指定过渡的属性、持续时间、延迟时间和过渡曲线（timing function）。

语法：

transition: property duration timing-function delay;

2. `transform`（变换）

用途：transform用于对元素进行位置、大小、形状或角度的变换，而不影响文档流。
特点：
- 可以实现平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果。
- 变换是即时的，不会产生过渡效果，除非与transition或animation结合使用。
语法：
```
transform: none | transform-function;
```
其中transform-function可以是translate(), rotate(), scale(), skew()等。

3. `animation`（动画）

用途：animation用于创建复杂的动画序列，可以通过@keyframes定义多个关键帧。
特点：
- 可以定义多个状态，不仅仅限于开始和结束状态。
- 可以控制动画的播放次数、方向、延迟时间等。
- 不需要触发条件，可以自动播放。

语法：

animation: name duration timing-function delay iteration-count direction fill-mode;

需要结合@keyframes使用，例如：

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

区别总结：

触发方式：transition需要状态变化触发，transform是即时变换，animation可以自动播放。
控制能力：transition简单过渡，transform仅变换，animation复杂动画控制。
关键帧：animation支持多关键帧，transition和transform不支持。
用途：transition适合简单交互，transform适合几何变换，animation适合复杂动画序列。在实际应用中，这些属性经常一起使用，以创建丰富多样的动画和过渡效果。例如，可以使用transform进行元素变换，同时使用transition为其添加平滑的过渡效果，或者使用animation结合transform创建复杂的动画序列。

4. 为什么 react 需要 fiber 架构，而 Vue 却不需要？

React引入Fiber架构和Vue没有引入类似架构的原因，主要与它们的渲染机制、设计哲学和性能优化策略有关。

React为什么需要Fiber架构？

同步渲染的问题：
- 在React 16之前，React使用的是同步渲染机制，即一旦开始渲染，就不能中断，直到渲染完成。这会导致在复杂应用中，长时间占用主线程，造成界面卡顿，影响用户体验。
可中断的渲染：
- Fiber架构的核心是允许渲染过程可以被中断，将渲染工作分解为多个小任务，这些任务可以在浏览器空闲时执行，从而避免长时间占用主线程。
更好的调度：
- Fiber架构提供了更细粒度的控制，可以优先处理用户交互等高优先级的任务，提高响应性。
增量更新：
- Fiber可以实现增量更新，只更新变化的部分，而不是重新渲染整个组件树，提高效率。
错误边界：
- Fiber架构使得React可以更好地处理错误，例如，可以在渲染过程中捕获错误，避免整个应用崩溃。

Vue为什么不需要Fiber架构？

响应式系统：
- Vue使用基于Object.defineProperty的响应式系统，可以精确地知道哪些数据发生了变化，从而只更新必要的部分。这种细粒度的更新机制减少了全量重渲染的需要。
虚拟DOM的优化：
- Vue的虚拟DOM实现进行了优化，例如，使用静态标记来避免不必要的更新，使用模板编译时的静态分析来优化渲染过程。
组件级别的更新：
- Vue的组件更新通常是组件级别的，而不是整个应用级别。这意味着Vue可以更局部地处理更新，减少了对全局调度器的需求。
设计哲学：
- Vue的设计哲学更倾向于简单和直观，尽量减少开发者需要考虑的复杂度。Fiber架构的引入会增加框架的复杂性，这与Vue的设计理念不完全契合。
性能表现：
- Vue在大多数场景下已经提供了良好的性能表现，对于大多数应用来说，现有的渲染机制已经足够高效。

总结

React引入Fiber架构是为了解决大规模应用中同步渲染带来的性能问题，提供更灵活的调度和更好的用户体验。而Vue通过其响应式系统、虚拟DOM优化和组件级别的更新策略，已经在很大程度上解决了类似的问题，因此没有引入类似Fiber的架构。两种框架各有其优势，选择哪种框架取决于具体的项目需求和开发者的偏好。

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

React团队在开发Fiber架构时考虑过使用requestIdleCallback，但最终决定不直接依赖它，主要原因如下：

1. 兼容性问题

requestIdleCallback是较新的API，不是所有浏览器都支持。为了确保React能在更多环境中运行，不能直接依赖这个API。

2. 调度控制

requestIdleCallback的行为在不同浏览器中可能不一致，而且它的调度是由浏览器控制的，React团队希望有更精细的控制权，以便根据React的具体需求调整任务调度。

3. 延迟问题

requestIdleCallback可能会在帧末尾执行，但如果浏览器帧率不稳定或任务执行时间较长，可能会导致任务延迟执行，影响用户体验。

4. 测试和调试

直接使用requestIdleCallback会增加测试和调试的复杂性，因为它的行为依赖于浏览器的实现和当前系统的负载。

5. 自定义调度器

React团队选择实现自己的调度器，这样可以更好地控制任务的执行时机和优先级，提供更一致的体验。

6. 性能优化

React的Fiber架构需要更细粒度的任务拆分和优先级控制，而requestIdleCallback提供的功能相对简单，无法满足所有需求。

7. 后备方案

在不支持requestIdleCallback的环境下，React需要有一个后备方案，而实现自己的调度器可以确保在所有环境下都能正常工作。

React的解决方案

React团队实现了一个名为“Fiber”的调度器，它在内部模拟了requestIdleCallback的行为，同时提供了更精细的控制。Fiber调度器可以在不支持requestIdleCallback的浏览器上回退到使用setTimeout或requestAnimationFrame。

总结

虽然requestIdleCallback为浏览器提供了一种在空闲时执行任务的方式，但为了兼容性、控制权、性能和一致性，React团队选择实现自己的调度器，以满足Fiber架构的复杂需求。这种方式提供了更灵活、更可靠的调度机制，有助于提升大规模React应用的性能和用户体验。

6. MessageChannel 是什么，有什么使用场景？

MessageChannel 是 Web API 的一部分，它允许我们创建一个新的消息通道，并通过这个通道在不同的执行上下文（如Web Workers）或者同一个执行上下文中的不同部分（如主线程中的不同任务）之间进行通信。

MessageChannel 的基本结构

MessageChannel 对象包含两个MessagePort对象，这两个端口可以用来发送和接收消息。创建一个MessageChannel后，可以通过port1和port2来进行通信。

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

使用场景

Web Workers 通信：
- 在主线程和Web Worker之间建立通信通道，或者在不同的Web Workers之间进行通信。

// 主线程
const worker = new Worker('worker.js');
const channel = new MessageChannel();
worker.postMessage({port: channel.port1}, [channel.port1]);
// Worker.js
self.onmessage = function(e) {
  const port = e.data.port;
  port.onmessage = function(event) {
    console.log('Message from main thread:', event.data);
  };
};

跨文档通信：
- 在不同的文档（如iframe中的文档和父文档）之间进行通信。

// 父文档
const iframe = document.getElementById('myIframe');
const channel = new MessageChannel();
iframe.contentWindow.postMessage({port: channel.port1}, '*', [channel.port1]);
// 子文档
window.onmessage = function(e) {
  const port = e.data.port;
  port.onmessage = function(event) {
    console.log('Message from parent:', event.data);
  };
};

异步任务调度：
- 使用MessageChannel来创建一个微任务，用于调度异步任务，类似于Promise的异步行为。

const channel = new MessageChannel();
channel.port2.onmessage = function() {
  // 这里执行异步任务
};
channel.port1.postMessage(null); // 触发微任务

避免回调地狱：
- 在复杂的异步操作中，使用MessageChannel可以帮助避免回调地狱，使代码更加清晰。
性能优化：
- 在某些情况下，可以使用MessageChannel来优化性能，比如将计算密集型任务分配给Web Worker，并通过MessageChannel进行通信。
封装组件通信：
- 在封装的组件库或框架中，可以使用MessageChannel作为组件间通信的机制。

注意事项

MessageChannel的端口（MessagePort）可以在不同的执行上下文中传输，但必须通过postMessage方法的第二个参数（transfer list）来转移所有权。
MessageChannel的通信是异步的，消息的发送和接收不会阻塞主线程。
在使用MessageChannel进行跨域通信时，需要确保目标域是可信的，以避免安全风险。 MessageChannel提供了一种灵活的通信机制，适用于多种Web开发场景，特别是需要在不同执行上下文之间进行高效、安全通信的情况。

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

React 和 React DOM 是两个相互关联但又有不同职责的库，它们共同工作以构建和渲染用户界面。

React

React 是一个用于构建用户界面的 JavaScript 库。它的核心功能包括：

声明式设计：React 让你只需要描述 UI 应该是什么样子，而不用关心如何实现这种变化。
组件化：React 应用由多个独立的、可复用的组件构成。
状态管理：React 允许你将状态管理到组件内部，使得数据流更加清晰。
生命周期方法：React 组件可以定义生命周期方法，以在组件的不同阶段执行操作。
虚拟 DOM：React 使用虚拟 DOM 来提高性能，只有当数据变化时，React 才会重新渲染组件。 React 本身并不关心如何将组件渲染到浏览器中，它只是定义了组件的结构和行为的抽象。

React DOM

React DOM 是一个与 React 配合使用的库，专门负责将 React 组件渲染到浏览器的 DOM 中。它的主要功能包括：

渲染：将 React 组件转换为 DOM 元素，并将它们插入到浏览器的 DOM 树中。
更新：当 React 组件的状态发生变化时，React DOM 负责更新浏览器中的 DOM 以反映这些变化。
事件处理：React DOM 处理浏览器事件，并将它们传递给相应的 React 组件。 React DOM 是 React 的一个实现，专注于 Web 平台。它知道如何管理浏览器中的 DOM 元素，并且提供了 React 与浏览器之间的桥梁。

关系

依赖关系：React DOM 依赖于 React，因为它是 React 的一个实现，专门用于 Web 平台。
职责划分：React 定义了组件的抽象和状态管理，而 React DOM 负责将这些抽象组件渲染为实际的 DOM 元素。
平台特定：React 可以用于不同的平台（如 React Native 用于移动应用），而 React DOM 是特定于 Web 平台的。在实际开发中，你通常会同时使用 React 和 React DOM。你使用 React 来定义组件，而 React DOM 来确保这些组件在浏览器中正确渲染和更新。

示例

// 使用 React 定义组件
import React from 'react';
function App() {
  return <div>Hello, React!</div>;
}
// 使用 React DOM 将组件渲染到浏览器中
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

在这个示例中，React 用于定义 App 组件，而 ReactDOM 用于将 App 组件渲染到页面的 root 元素中。这就是 React 和 React DOM 如何协同工作的一个简单例子。

8. React Portals 有什么用？

React Portals 是 React 中的一个高级功能，允许你将子组件渲染到父组件以外的 DOM 节点中。这在某些场景下非常有用，特别是当你需要突破组件的层级限制来管理 DOM 结构时。以下是 React Portals 的主要用途和优势：

主要用途：

模态对话框（Modals）：
- 模态对话框通常需要出现在页面的最顶层，以避免被其他内容遮挡。
- 使用 Portals 可以将模态对话框渲染到 body 或其他特定的容器中，确保它总是显示在顶层。
工具提示（Tooltips）：
- 工具提示可能需要根据触发元素的位置进行定位。
- Portals 允许将工具提示渲染到页面的特定位置，独立于触发元素的层级。
弹出菜单（Popovers）：
- 类似于模态对话框和工具提示，弹出菜单也需要灵活的定位和层级管理。
- Portals 可以帮助实现这一点，使弹出菜单不受父组件层级的影响。
全局通知（Global Notifications）：
- 全局通知（如警告框、提示信息等）通常需要显示在页面的固定位置，如顶部或底部。
- 使用 Portals 可以将这些通知渲染到指定的全局容器中。

优势：

层级管理：
- Portals 允许你突破 CSS 的层级限制，将组件渲染到任何你想要的位置。
- 这对于需要覆盖其他内容的组件（如模态对话框）尤其有用。
性能优化：
- 通过将某些组件渲染到单独的容器中，可以减少主组件树的复杂度，从而可能提高渲染性能。
样式隔离：
- 将组件渲染到不同的容器中可以有助于隔离样式，避免样式冲突。
更好的可访问性：
- 对于需要特定可访问性属性的组件（如模态对话框需要设置 aria-modal），Portals 可以帮助实现更符合可访问性标准的渲染。

示例：

import React from 'react';
import ReactDOM from 'react-dom';
function Modal({ children }) {
  // 假设有一个在 DOM 中已经存在的元素作为 Portal 的容器
  const modalRoot = document.getElementById('modal-root');
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    modalRoot
  );
}
function App() {
  return (
    <div>
      <h1>My App</h1>
      <Modal>
        <p>This is a modal!</p>
      </Modal>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

在这个示例中，Modal 组件使用 ReactDOM.createPortal 将其子组件渲染到 #modal-root 元素中，而不是其父组件的 DOM 结构中。这样，无论 Modal 组件在组件树中的位置如何，它都会显示在 #modal-root 指定的位置。总之，React Portals 为管理复杂 DOM 结构和组件层级提供了强大的工具，特别适用于需要灵活定位和层级管理的场景。

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

try...catch 语句用于捕获同步代码中的错误，但它不能直接捕获异步代码中的错误，特别是那些在异步操作完成后才发生的错误。以下是一些具体情况：

1. 同步代码

在同步代码中，try...catch 可以正常工作：

try {
  // 同步代码
  console.log(undefinedVariable); // 这将抛出错误
} catch (error) {
  console.error(error); // 错误被捕获
}

2. 异步代码（例如 setTimeout）

在异步代码中，try...catch 不能捕获在异步操作完成后发生的错误：

try {
  setTimeout(() => {
    // 异步代码
    console.log(undefinedVariable); // 这将抛出错误，但不会被 try...catch 捕获
  }, 1000);
} catch (error) {
  console.error(error); // 这里的代码不会执行
}

3. Promise

在 Promise 中，try...catch 也不能直接捕获在 Promise 执行过程中发生的错误：

try {
  new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(undefinedVariable); // 这将抛出错误，但不会被 try...catch 捕获
    }, 1000);
  });
} catch (error) {
  console.error(error); // 这里的代码不会执行
}

但是，你可以使用 .catch() 方法来捕获 Promise 中的错误：

new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(undefinedVariable); // 这将抛出错误
  }, 1000);
}).catch(error => {
  console.error(error); // 错误被捕获
});

4. async/await

在使用 async/await 的异步函数中，try...catch 可以捕获等待的 Promise 中发生的错误：

async function asyncFunction() {
  try {
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(undefinedVariable); // 这将抛出错误
      }, 1000);
    });
  } catch (error) {
    console.error(error); // 错误被捕获
  }
}
asyncFunction();

总结

同步代码：try...catch 可以正常捕获错误。
异步代码（如 setTimeout）：try...catch 不能直接捕获错误，需要使用其他方法（如回调函数中的 try...catch）。
Promise：try...catch 不能直接捕获错误，但可以使用 .catch() 方法来捕获。
async/await：try...catch 可以捕获等待的 Promise 中发生的错误。在使用异步代码时，需要根据具体的异步模式选择合适的错误处理方法。

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

渐进式框架是一种设计理念，它允许开发者逐步采用和集成框架的功能，而不是一开始就必须接受整个框架的所有特性和约定。这种设计方式使得框架能够适应不同规模和复杂度的项目，同时也为开发者提供了更大的灵活性和选择空间。以下是对渐进式框架的几点理解：

1. 模块化

渐进式框架通常由多个独立的模块组成，开发者可以根据需要选择和使用这些模块。这种模块化设计使得框架更加灵活，也方便开发者按需加载，减少不必要的依赖和性能开销。

2. 易于集成

渐进式框架可以很容易地集成到现有的项目中，而无需对整个项目进行大规模的重构。开发者可以逐步引入框架的某些功能，与现有的代码和库协同工作。

3. 可扩展性

随着项目的发展，渐进式框架允许开发者逐步扩展其功能，以满足不断增长的需求。这种可扩展性使得框架能够适应从小型到大型各种规模的项目。

4. 学习曲线平缓

由于开发者可以逐步采用框架的功能，因此学习曲线相对平缓。开发者可以先掌握框架的基本概念和核心功能，然后逐步深入到更高级的特性。

5. 社区和支持

渐进式框架通常拥有活跃的社区和良好的支持，这使得开发者可以更容易地找到资源、解决问题和获取帮助。

举例：Vue.js

Vue.js 是一个典型的渐进式框架。它允许开发者：

使用核心库：仅使用 Vue 的核心库来构建简单的交互式应用。
集成第三方库：与现有的库和工具（如 jQuery、React 等）集成。
使用生态系统：逐步采用 Vue 的生态系统，包括路由管理（Vue Router）、状态管理（Vuex）等。
构建单页应用：使用 Vue 及其生态系统构建复杂的大型单页应用（SPA）。

总结

渐进式框架提供了一种灵活、可扩展且易于集成的开发方式，使得开发者能够根据项目的具体需求和规模逐步采用和扩展框架的功能。这种设计理念在现代前端开发中越来越受欢迎，因为它能够更好地适应快速变化的技术环境和开发需求。

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

在Vue中，祖孙组件之间的通信可以通过多种方式实现。以下是一些常见的通信方案：

1. Props / Events（父子组件通信）

虽然这是父子组件之间的直接通信方式，但可以通过逐级传递的方式实现祖孙组件之间的通信。

Props：祖组件可以通过props向孙组件传递数据。
Events：孙组件可以通过事件向祖组件发送消息，祖组件再向下传递。

2. Event Bus（事件总线）

Event Bus是一个空的Vue实例，用于在组件之间传递事件。

创建一个Event Bus实例，并在祖组件和孙组件中分别使用$emit和$on来进行通信。

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
// 祖组件
EventBus.$emit('event-name', payload);
// 孙组件
EventBus.$on('event-name', callback);

3. Vuex（状态管理）

使用Vuex可以创建一个全局的状态管理库，祖孙组件都可以通过这个库来共享状态。

祖组件通过mutations或actions改变状态。
孙组件通过计算属性或映射状态来获取状态，并可以监听状态的变化。

4. Provide / Inject（依赖注入）

Vue提供了provide和inject选项，允许一个祖先组件向其所有子孙组件注入一个依赖，无论组件层次有多深，并在起上下游关系成立的时间里始终生效。

祖组件使用provide选项提供数据。
孙组件使用inject选项注入数据。

// 祖组件
provide() {
  return {
    someData: this.someData
  };
}
// 孙组件
inject: ['someData'];

5. $attrs /$ listeners（跨级组件通信）

$attrs：包含了父作用域中不作为prop被识别的特性绑定（class和style除外）。
$listeners：包含了父作用域中的（不含.native修饰器的）v-on事件监听器。祖组件可以通过$attrs向下传递数据，孙组件可以通过$listeners向上传递事件。

6. Refs / $refs（直接访问）

虽然这不是推荐的做法，但可以通过refs直接访问子组件的实例。

祖组件可以使用$refs来访问孙组件的实例，并直接调用其方法或修改其数据。

// 祖组件
<this.$refs.grandchildComponent.someMethod()>

7.全局状态管理（如Redux、MobX等）

虽然这些不是Vue官方的解决方案，但也可以用于Vue项目中，通过全局状态管理来实现祖孙组件之间的通信。

总结

选择哪种通信方式取决于具体的项目需求和场景。对于简单的应用，使用Props / Events或Event Bus可能就足够了。对于大型应用，考虑使用Vuex或Provide / Inject来更好地管理状态和依赖。无论选择哪种方式，都应该确保代码的可维护性和可扩展性。

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

在Web开发中，CSS的作用域隔离通常是通过CSS Modules、Shadow DOM或者CSS-in-JS等机制来实现的。然而，有时我们可能需要打破这种隔离，以便在组件之间共享样式或覆盖默认样式。以下是一些常见的方法来打破scope对样式隔离的限制：

1. 使用全局样式

将样式定义在全局CSS文件中，而不是局部组件的样式文件中，这样所有组件都可以访问这些样式。

/* global.css */
.shared-class {
  color: red;
}

2. 显式地使用全局类

在组件的模板中，可以显式地使用全局类来应用全局样式。

<!-- MyComponent.vue -->
<div class="shared-class">This is red text.</div>

3. 使用穿透选择器

在一些CSS预处理器或框架中，可以使用穿透选择器来打破scope隔离。

Vue单文件组件（.vue）：使用>>>或/deep/或::v-deep选择器。

<style scoped>
.outer >>> .inner {
  color: red;
}
/* 或 */
.outer /deep/ .inner {
  color: red;
}
/* 或 */
.outer ::v-deep .inner {
  color: red;
}
</style>

CSS Modules：使用:global关键字。

:global(.shared-class) {
  color: red;
}

4. 动态样式

通过JavaScript动态地添加样式到DOM元素上，可以绕过CSS的scope隔离。

// 在组件的mounted生命周期钩子中
mounted() {
  const element = this.$el.querySelector('.some-class');
  element.style.color = 'red';
}

5. 使用内联样式

直接在HTML元素上使用style属性来定义样式，这样不会受到CSS scope的影响。

<div style="color: red;">This is red text.</div>

6. 使用CSS-in-JS库

CSS-in-JS库如Styled-Components或Emotion允许你以JavaScript的方式编写CSS，并且可以控制样式的scope。你可以选择不使用scope或者明确地导出样式以供其他组件使用。

7. Shadow DOM

如果你使用的是Shadow DOM来实现样式隔离，可以通过::part伪元素来暴露内部的样式，以便外部可以对其进行修改。

<template>
  <div class="host">
    <div class="part">This is a part</div>
  </div>
</template>
<style>
:host {
  display: block;
  border: 1px solid black;
}
::part(part) {
  color: red;
}
</style>

注意事项

谨慎使用：打破样式隔离可能会引入样式冲突和维护困难，应该谨慎使用。
明确意图：在需要打破隔离时，应该明确这样做的意图，并确保不会对其他组件造成意外的影响。
文档记录：对于打破隔离的样式，应该在项目文档中进行记录，以便团队成员了解。总之，虽然有时需要打破scope对样式隔离的限制，但应该尽量避免这样做，以保持样式的可维护性和组件的独立性。在必须这样做的情况下，选择合适的方法并谨慎实施。

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

Scoped Styles 可以实现样式隔离的原因主要在于它们是如何被处理的。在Vue、Angular等前端框架中，Scoped Styles 通过特定的方式将样式限制在组件内部，避免了对其他组件的影响。以下是Scoped Styles实现样式隔离的原理：

1. 原理概述

当你在Vue组件的<style>标签中添加scoped属性时，Vue会通过以下方式处理这些样式：

唯一属性添加：Vue会为组件内的所有元素添加一个唯一的属性（例如data-v-f3f3eg9），这个属性是随机生成的，以确保唯一性。
样式修改：Vue会修改CSS规则，将选择器指向带有这个唯一属性的元素。

2. 处理过程

以下是具体的处理过程：

Step 1: 添加唯一属性

假设有一个简单的Vue组件：

<template>
  <div class="my-class">
    Hello, World!
  </div>
</template>
<style scoped>
.my-class {
  color: red;
}
</style>

Vue会编译这个组件，并在渲染的HTML中为元素添加一个唯一的属性：

<div class="my-class" data-v-f3f3eg9>
  Hello, World!
</div>

Step 2: 修改样式

接下来，Vue会修改CSS规则，使其只应用于带有这个唯一属性的元素：

.my-class[data-v-f3f3eg9] {
  color: red;
}

3. 结果

由于样式规则现在包含了一个唯一的属性选择器，它只会应用于带有这个属性的元素。这意味着即使其他组件也有.my-class的类，它们也不会被这个样式规则影响，因为它们没有data-v-f3f3eg9这个属性。

4. 其他框架的实现

虽然上述解释是基于Vue的，但其他框架也有类似的实现方式。例如，Angular使用组件封装机制，通过组件的封装上下文来限制样式的应用范围。

5. 优点

避免冲突：Scoped Styles可以有效避免组件间的样式冲突。
组件独立：使得组件可以独立开发和维护，不需要担心全局样式的影响。
易于理解：开发者可以直观地看到哪些样式属于哪个组件。

6. 注意事项

性能影响：虽然影响不大，但Scoped Styles会增加一些编译时的复杂性和运行时的性能开销。
选择器限制：Scoped Styles可能会限制一些复杂CSS选择器的使用，因为它们依赖于特定的属性选择器。
覆盖困难：有时可能需要额外的步骤来覆盖Scoped Styles，例如使用穿透选择器。总之，Scoped Styles通过为组件内的元素添加唯一属性并修改CSS规则，实现了样式隔离，从而避免了样式冲突，使得组件更加独立和可维护。

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

在Vue中，实现样式隔离的主要方法是使用scoped属性在<style>标签中。这样，Vue会自动处理这些样式，确保它们只应用于当前组件的元素，而不会影响到其他组件。以下是具体如何实现样式隔离的步骤：

1. 使用`scoped`属性

在Vue单文件组件（.vue文件）中，你可以在<style>标签中添加scoped属性：

<template>
  <div class="my-component">
    <p>This is a paragraph in my component.</p>
  </div>
</template>
<style scoped>
.my-component {
  background-color: blue;
}
.my-component p {
  color: white;
}
</style>

2. Vue如何处理`scoped`样式

当你使用scoped属性时，Vue会进行以下处理：

唯一属性添加：Vue会为组件内的所有元素添加一个唯一的属性，例如data-v-f3f3eg9。
样式修改：Vue会修改CSS规则，将选择器指向带有这个唯一属性的元素。

3. 编译后的结果

编译后，Vue会生成如下HTML和CSS：

<div class="my-component" data-v-f3f3eg9>
  <p data-v-f3f3eg9>This is a paragraph in my component.</p>
</div>

.my-component[data-v-f3f3eg9] {
  background-color: blue;
}
.my-component p[data-v-f3f3eg9] {
  color: white;
}

这样，即使其他组件也有.my-component的类，它们也不会被这些样式规则影响，因为它们没有data-v-f3f3eg9这个属性。

4. 其他方法

除了使用scoped属性，还有一些其他方法可以实现样式隔离：

CSS Modules：Vue支持CSS Modules，可以通过<style module>来使用。这会将类名转换为唯一的标识符。
命名约定：使用独特的命名约定来避免样式冲突，例如BEM（Block Element Modifier）方法。
组件封装：将组件封装在特定的命名空间或类名下，以减少样式冲突的可能性。

5. 注意事项

性能影响：使用scoped属性可能会增加一些编译时的复杂性和运行时的性能开销。
选择器限制：scoped样式可能会限制一些复杂CSS选择器的使用。
覆盖困难：有时可能需要额外的步骤来覆盖scoped样式，例如使用穿透选择器。通过这些方法，Vue可以有效地实现样式隔离，确保组件的样式不会相互干扰，从而提高开发效率和组件的可维护性。

15. webpack的module、bundle、chunk分别指的是什么？

在Webpack中，module、bundle和chunk是三个核心概念，它们在Webpack的打包过程中扮演着不同的角色。下面分别解释这三个概念：

1. Module（模块）

Module指的是Webpack中可以管理的最小单元，通常是以下几种形式：

JavaScript文件：常见的.js文件。
CSS文件：通过加载器（如css-loader）处理的.css文件。
图片：通过加载器（如file-loader或url-loader）处理的图片文件。
其他资源：如字体、SVG等，也可以被Webpack视为模块。 Webpack通过模块打包器（module bundler）的功能，将各种类型的模块整合在一起，形成最终的静态资源。

2. Bundle（打包文件）

Bundle是Webpack打包后的输出文件。当你运行Webpack时，它会将入口文件（entry point）及其依赖的模块打包成一个或多个bundle文件。这些bundle文件包含了所有模块的代码，并且可以被浏览器加载和执行。例如，你可能有以下入口文件和对应的bundle：

main.js -> bundle.js
vendor.js -> vendor.bundle.js Bundle文件通常是优化后的，包括压缩、代码分割等处理，以减少文件大小和提高加载速度。

3. Chunk（代码块）

Chunk是Webpack在打包过程中生成的代码块。一个chunk可以包含一个或多个模块，它是Webpack进行代码分割（code splitting）的基础单位。以下是一些生成chunk的情况：

入口点：每个入口点会生成一个chunk。
代码分割：使用动态import()语法或Webpack的分割插件（如SplitChunksPlugin）可以生成额外的chunk。
异步模块：异步加载的模块会被放入单独的chunk中。 Chunk可以进一步被打包成bundle文件。例如，你可能有以下chunk和对应的bundle：
main_chunk -> bundle.js
vendor_chunk -> vendor.bundle.js
async_chunk -> async.bundle.js

关系总结

Module是Webpack管理的最小单元，可以是任何类型的文件。
Bundle是Webpack打包后的输出文件，包含了一个或多个模块。
Chunk是Webpack在打包过程中生成的代码块，可以包含一个或多个模块，并且可以进一步被打包成bundle文件。理解这三个概念的关系有助于更好地使用Webpack进行项目构建和优化。通过合理配置Webpack，可以实现高效的代码分割、懒加载和缓存策略，从而提高应用的性能和用户体验。

16. 说一下 vite 的构建流程

Vite 是一种新型的前端构建工具，它利用浏览器原生支持的 ES Module 特性，实现了快速的热更新和构建。Vite 的构建流程可以分为两个主要阶段：开发服务器启动和构建生产版本。以下是这两个阶段的详细流程：

开发服务器启动流程

启动服务器：
- Vite 使用 koa（一个轻量的 Node.js Web 框架）启动一个开发服务器。
- 服务器监听 HTTP 请求，并对请求的文件进行响应。
请求处理：
- 当浏览器请求一个 .js 文件时，Vite 服务器会拦截这个请求。
- Vite 会对请求的模块进行实时编译，转换为浏览器可以理解的格式。
- 如果模块中包含导入语句（import），Vite 会解析这些导入，并将它们转换为适当的请求。
热模块替换（HMR）：
- Vite 利用 WebSocket 实现与浏览器的实时通信。
- 当源文件发生变化时，Vite 服务器会发送消息到浏览器，通知它进行模块替换。
- 浏览器接收到消息后，只会重新加载变化的模块，而不是整个页面，从而实现快速的热更新。
插件系统：
- Vite 提供了一个插件系统，允许用户自定义开发服务器的行为。
- 插件可以在请求处理、编译、HMR 等阶段进行干预。

构建生产版本流程

打包：
- 当运行 vite build 命令时，Vite 会使用 rollup（一个模块打包器）进行打包。
- Vite 会分析入口文件，并递归地构建依赖图。
转换和优化：
- Vite 会应用各种转换，如将 ES Module 转换为 CommonJS，压缩代码，tree-shaking 等。
- Vite 还会处理静态资源，如图片、CSS 等，并将它们打包到最终输出中。
代码分割：
- Vite 支持代码分割，可以将代码分割成多个 chunks，以实现懒加载和优化缓存。
生成输出：
- Vite 会生成最终的静态文件，通常包括 JavaScript、CSS、HTML 等。
- 这些文件可以被部署到任何静态服务器上。
插件系统：
- 与开发服务器一样，Vite 的构建过程也支持插件系统，允许用户自定义打包行为。

总结

Vite 的构建流程充分利用了现代浏览器的能力，通过 ES Module 和 HMR 实现了快速的开发体验。在生产环境构建中，Vite 使用 Rollup 进行高效的打包和优化。Vite 的插件系统为用户提供了高度的可定制性，使得 Vite 既能满足日常开发需求，也能应对复杂的项目构建场景。

17. created 和 mounted 有什么区别？

created 和 mounted 是 Vue.js 组件生命周期中的两个钩子函数，它们在组件实例的不同阶段被调用，具有不同的用途和特点：

`created` 钩子

调用时机：在组件实例被完全创建之后被调用，此时数据观测（data observer）和事件/侦听器（event/watcher）已经设置完毕。
特点：
- 此时，组件的模板结构还未生成，因此无法访问 $el 属性。
- 可以访问和操作数据（data），因为数据已经初始化。
- 可以调用方法（methods）。
- 常用于发起异步请求、设置初始数据等。

`mounted` 钩子

调用时机：在组件的模板和 DOM 结构被渲染并挂载完成后被调用。
特点：
- 此时，组件的 $el 属性已经被赋值，可以访问到真实的 DOM 元素。
- 可以进行 DOM 操作，如查询 DOM、绑定事件等。
- 常用于操作 DOM、使用第三方库（如 jQuery、D3 等）等。

区别总结

执行时机：created 在组件实例创建后立即执行，而 mounted 在组件的 DOM 结构渲染完成后执行。
DOM 访问：created 阶段无法访问 $el，而 mounted 阶段可以。
用途：created 通常用于数据初始化和发起异步请求，mounted 通常用于 DOM 操作和集成第三方库。

示例

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('created:', this.message); // 可以访问数据
    // 无法访问 this.$el
  },
  mounted() {
    console.log('mounted:', this.$el); // 可以访问 DOM
    // 可以进行 DOM 操作
  }
});

在上述示例中，created 钩子中可以访问到 message 数据，但无法访问 $el。而在 mounted 钩子中，可以访问到组件的根 DOM 元素，并进行相应的 DOM 操作。了解这些钩子的区别和用途，可以帮助开发者更好地组织代码和利用 Vue 的生命周期管理功能。

18. webpack 5 的主要升级点有哪些？

Webpack 5 是 Webpack 的一个主要版本更新，它带来了许多新功能和改进。以下是一些主要的升级点：

持久化缓存：
- Webpack 5 引入了更强大的持久化缓存机制，可以显著提高构建速度，尤其是在开发模式下。
模块联邦（Module Federation）：
- 模块联邦允许在不同构建中共享模块，从而实现微前端架构或更灵活的代码共享策略。
长期缓存（Long Term Caching）：
- 通过改进的算法和配置，Webpack 5 提供了更好的长期缓存支持，减少了浏览器缓存失效的情况。
更好的树摇（Tree Shaking）：
- Webpack 5 加强了树摇功能，可以更有效地移除未使用的代码，减小打包体积。
内置的模块类型：
- Webpack 5 引入了新的模块类型，如 asset/resource、asset/inline、asset/source 等，使得处理资源文件更加简单和直观。
移除 Node.js polyfills：
- Webpack 5 默认不再包含 Node.js 核心模块的 polyfills，以减少打包体积，需要时可以手动添加。
更好的算法：
- Webpack 5 使用了更高效的算法来处理依赖图，提高了构建性能。
新的配置选项：
- 引入了一些新的配置选项，如 output.chunkLoading 和 output.module，以支持新的功能。
改进的代码生成：
- Webpack 5 对代码生成进行了优化，生成的代码更加高效。
实验性功能：
- Webpack 5 引入了一些实验性功能，如 webpack experiments，允许用户尝试新的特性。
性能优化：
- 在多个方面进行了性能优化，包括更快的启动速度和更少的内存使用。
更好的错误提示：
- Webpack 5 提供了更清晰、更具体的错误提示，有助于开发者更快地定位和解决问题。
兼容性改进：
- Webpack 5 在保持向后兼容的同时，也做了许多改进以支持未来的 JavaScript 特性。
插件和加载器的改进：
- 许多插件和加载器都进行了更新，以充分利用 Webpack 5 的新特性。这些升级点使得 Webpack 5 成为更强大、更灵活、更高效的模块打包工具。开发者可以利用这些新特性来优化构建流程，提高开发效率。

19. 虚拟dom渲染到页面的时候，框架会做哪些处理？

虚拟DOM（Virtual DOM）渲染到页面的过程是前端框架（如React、Vue等）中的核心机制之一。以下是这一过程中框架通常会进行的一些处理步骤：

虚拟DOM的创建：
- 框架首先会根据组件的返回值（如React中的JSX或Vue中的模板）创建虚拟DOM树。虚拟DOM是一个轻量级的JavaScript对象，代表了真实DOM的结构和属性。
差异算法（Diffing）：
- 当组件状态发生变化时，框架会生成新的虚拟DOM树，并使用差异算法（如React的Reconciliation算法）比较新旧虚拟DOM树的差异。
- 差异算法会找出需要变更的最小集合，比如哪些节点被添加、删除或修改。
生成变更指令：
- 根据差异算法的结果，框架会生成一系列的变更指令（或称为补丁操作），这些指令描述了如何将旧的真实DOM更新为新的一致状态。
批量更新：
- 框架通常会批量处理这些变更指令，以减少直接操作真实DOM的次数，从而提高性能。
调度更新：
- 在React等框架中，更新操作会被放入任务队列中，由调度器（如React的Reconciler）控制更新的时机和优先级。
真实DOM的更新：
- 框架会根据变更指令操作真实DOM，包括添加、删除、修改节点以及更新属性和样式等。
生命周期钩子的调用：
- 在更新过程中，框架会触发相应的生命周期钩子（如在React中的componentDidUpdate或在Vue中的updated），允许开发者执行额外的操作。
状态同步：
- 确保虚拟DOM和真实DOM的状态保持同步，以便后续的更新操作基于正确的状态进行。
事件监听器的管理：
- 框架会负责管理事件监听器的添加和移除，确保事件系统正常工作。
优化策略：
- 框架可能会应用一些优化策略，如懒加载、异步组件、虚拟列表等，以进一步提高性能和用户体验。
错误处理：
- 在更新过程中，框架会捕获并处理可能出现的错误，避免导致整个应用崩溃。
副作用处理：
- 处理一些副作用，如清理定时器、取消未完成的异步操作等。这些步骤在不同的框架中可能有所差异，但总体上，虚拟DOM渲染到页面的过程是一个高效、可控且可优化的机制，它使得前端应用可以更快速、更稳定地更新用户界面。

20. setTimeout 延时写成0，一般可以什么场景下使用？

将 setTimeout 的延时写成 0，即 setTimeout(func, 0)，通常用于将函数的执行推迟到当前调用栈清空之后，但尽可能快地执行。这种做法在 JavaScript 中有几个常见的使用场景：

异步执行：
- 当你想要异步执行某个函数，但又不需要等待特定的时间，只是希望它不要阻塞当前的执行流程。
避免阻塞UI渲染：
- 在执行一些复杂或耗时的计算时，使用 setTimeout(func, 0) 可以避免阻塞UI线程，从而保持界面的响应性。
事件处理：
- 在事件处理函数中，如果你需要执行一些操作，但又不想这些操作影响到当前事件的处理，可以使用 setTimeout 来延迟执行。
微任务与宏任务：
- 在 JavaScript 事件循环中，setTimeout 创建的是宏任务。使用 setTimeout(func, 0) 可以确保在所有的微任务（如 Promise 的回调）执行完毕后，再执行指定的函数。
函数节流：
- 在实现函数节流（throttle）或防抖（debounce）时，setTimeout 可以用来控制函数的执行时机。
异步获取数据：
- 在异步获取数据后，需要执行一些操作，但这些操作又不依赖于获取数据的同步流程，可以使用 setTimeout 来安排这些操作的执行。
处理循环中的异步操作：
- 在循环中执行异步操作时，使用 setTimeout 可以确保每次循环迭代都异步执行，避免循环提前结束。
协调多个异步操作：
- 当你需要协调多个异步操作的执行顺序时，setTimeout 可以作为简单的调度工具。
避免改变函数的执行上下文：
- 使用 setTimeout(func, 0) 可以确保函数在全局作用域或特定上下文中执行，而不受调用栈的影响。
测试和调试：
- 在测试和调试时，可以使用 setTimeout 来模拟异步行为，或者插入一些调试语句而不影响正常的执行流程。需要注意的是，虽然 setTimeout(func, 0) 看起来像是立即执行，但实际上它会在当前调用栈清空后执行，这意味着可能会有微小的延迟。此外，不同的浏览器和JavaScript引擎可能会有不同的最小延迟时间，通常这个时间不会是0，而是一个很小的正数（如4毫秒）。

21. 编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能

下面是一个简单的Vue组件示例，该组件实现了使用插槽接收外部内容、v-model双向绑定以及折叠展开的功能：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-if="isOpen">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ExpandablePanel',
  model: {
    prop: 'isOpen',
    event: 'change'
  },
  props: {
    isOpen: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggle() {
      this.$emit('change', !this.isOpen);
    }
  }
};
</script>

使用该组件的示例：

<template>
  <div>
    <expandable-panel v-model="panelOpen">
      <p>This is the content that can be expanded or collapsed.</p>
    </expandable-panel>
  </div>
</template>
<script>
import ExpandablePanel from './ExpandablePanel.vue';
export default {
  components: {
    ExpandablePanel
  },
  data() {
    return {
      panelOpen: false
    };
  }
};
</script>

在这个示例中：

ExpandablePanel 组件定义了一个名为 isOpen 的prop，用于控制内容的折叠与展开状态。
model 选项用于指定哪个prop用于v-model绑定（isOpen），以及触发更新的事件名称（change）。
toggle 方法用于切换 isOpen 的状态，并通过 $emit 触发 change 事件，以实现v-model的双向绑定。
在使用 ExpandablePanel 组件时，通过 v-model 绑定一个本地数据属性 panelOpen，这样就可以控制面板的展开和折叠状态。
插槽 <slot></slot> 用于接收外部传入的内容。这样，你就得到了一个具有折叠展开功能、支持v-model双向绑定且能通过插槽接收外部内容的Vue组件。

22. Vue是怎么把template模版编译成render函数的？

Vue将模板编译成渲染函数的过程主要分为三个阶段：解析（Parsing）、优化（Optimization）和生成（Code Generation）。下面是这三个阶段的详细解释：

1. 解析（Parsing）

在解析阶段，Vue编译器会解析模板中的HTML字符串，并将其转换成一个抽象语法树（AST，Abstract Syntax Tree）。AST是一个表示模板结构的数据结构，它包含了元素节点、属性节点和文本节点等。解析过程中，编译器会进行以下操作：

词法分析：将模板字符串分割成一个个标记（Token），例如开始标签、结束标签、属性、文本等。
语法分析：根据标记生成AST节点，并构建AST。

2. 优化（Optimization）

在优化阶段，Vue编译器会遍历AST，找出其中的静态节点。静态节点是指不需要在每次重新渲染时重新创建的节点，例如纯文本节点或者没有绑定动态属性的元素节点。优化过程中，编译器会进行以下操作：

标记静态节点：给AST中的静态节点打上标记。
标记静态根：如果一个节点是静态的，并且它的所有子节点也都是静态的，那么这个节点就会被标记为静态根。标记静态节点和静态根的目的是在生成渲染函数时，可以跳过这些节点的更新，从而提高渲染性能。

3. 生成（Code Generation）

在生成阶段，Vue编译器会根据AST生成渲染函数的代码。渲染函数是一个返回虚拟DOM树的函数，虚拟DOM是Vue用来描述视图的轻量级数据结构。生成过程中，编译器会进行以下操作：

遍历AST：根据AST节点的类型和属性，生成相应的JavaScript代码。
处理插槽和指令：对于插槽和指令，生成特定的代码来处理它们的行为。
生成渲染函数：将生成的代码组合成一个渲染函数。最终，生成的渲染函数会被挂载到Vue组件的options中的render函数上，这样在组件渲染时，就会调用这个渲染函数来生成虚拟DOM。

示例

假设我们有以下简单的Vue模板：

<div id="app">
  <p>{{ message }}</p>
</div>

编译器会将其转换成如下渲染函数：

function render() {
  with (this) {
    return _c('div', { attrs: { "id": "app" } }, [
      _c('p', [_v(_s(message))])
    ])
  }
}

在这个渲染函数中：

_c 表示创建一个元素节点。
_v 表示创建一个文本节点。
_s 表示将变量转换为字符串。
with (this) 语句使得在渲染函数中可以直接访问组件实例的属性和方法。这个过程是在Vue组件实例化之前完成的，编译后的渲染函数会被缓存起来，以便在组件渲染时重复使用。通过这种方式，Vue能够高效地将模板转换为最终的DOM结构。

23. 有些框架不用虚拟dom，但是他们的性能也不错是为什么？

有些框架不使用虚拟DOM但性能依然不错，这主要是因为它们采用了不同的更新策略和优化技术。以下是一些不使用虚拟DOM但性能良好的框架可能采用的方法：

1. 直接操作DOM

一些框架选择直接操作DOM来更新视图。虽然这听起来可能效率较低，但是通过精细的操作和优化，性能可以得到很好的控制。例如：

细粒度更新：只更新变化的部分，而不是整个组件。
批量操作：将多个DOM操作合并成一次执行，减少重绘和重排的次数。
使用DOM API的优化：利用现代浏览器提供的更高效的DOM API，如documentFragment、requestAnimationFrame等。

2. 数据绑定和观察者模式

使用数据绑定和观察者模式，框架可以实时监控数据变化，并精确地更新受影响的部分。这种方法可以避免虚拟DOM的 diff 过程，从而提高性能。

3. 声明式渲染

声明式渲染可以让框架更好地理解应用的状态和视图之间的映射关系，从而做出更智能的更新决策。这种方式减少了开发者需要编写的手动更新代码，也减少了出错的可能性。

4. 静态内容优化

对于静态内容，框架可以采用特殊的处理方式，比如预渲染或服务器端渲染，这样就不需要在客户端进行任何更新，从而提高性能。

5. Web Components

利用Web Components，框架可以将组件封装得更好，并且可以利用原生的浏览器能力来处理组件的更新和渲染。这可以减少框架层面的抽象和开销。

6. 编译时优化

一些框架在编译时进行优化，比如将模板编译成高效的JavaScript代码，或者在构建时删除不必要的代码。这些优化可以在运行时减少计算量，提高性能。

7. 原生性能API

利用原生的性能API，如IntersectionObserver用于懒加载、MutationObserver用于DOM变化检测等，可以使得框架在不使用虚拟DOM的情况下 still achieve good performance。

示例框架

Svelte：Svelte在编译时将组件转换为高效的JavaScript代码，直接操作DOM，避免了运行时的虚拟DOM开销。
Inferno：Inferno提供了类似于React的API，但是它在底层进行了很多优化，比如使用更快的diff算法和直接操作DOM。
LitElement：基于Web Components的LitElement利用原生的浏览器能力来处理组件的渲染和更新。总之，不使用虚拟DOM的框架通过上述种种策略和优化技术，同样能够实现优秀的性能。每种方法都有其优势和适用场景，选择哪种框架取决于具体的项目需求和开发者的偏好。

24. v-model 的原理是什么样的？

v-model 是 Vue.js 框架中用于实现双向数据绑定的一个指令。它的原理主要基于 Vue 的响应式系统和对 DOM 事件的监听。以下是 v-model 的基本工作原理：

响应式系统：
- Vue 使用了响应式系统来跟踪依赖和更新视图。当你在数据对象上设置属性时，Vue 会使用 Object.defineProperty（在 Vue 3 中使用 Proxy）来将这些属性转换为getter和setter，从而实现数据的响应式。
数据绑定：
- v-model 指令在组件的模板中创建了一个绑定，这个绑定将视图（DOM）与数据模型（Vue 实例的 data 属性）连接起来。
输入事件监听：
- 对于表单元素（如 <input>、<select>、<textarea> 等），v-model 会根据元素类型监听相应的事件（如 input、change 等），并在事件触发时更新数据模型。
更新视图：
- 当数据模型发生变化时，由于响应式系统的存在，Vue 会自动检测到这些变化并更新视图，从而反映新的数据值。具体来说，v-model 的实现可以分解为以下几个步骤：

初始化：在组件初始化时，v-model 会将绑定的数据属性设置为初始值，并显示在视图上。
视图到模型（View to Model）：当用户在视图上输入或更改数据时（例如在输入框中打字），v-model 会监听这些变化并通过事件处理器（如 input 事件）更新数据模型。
模型到视图（Model to View）：当数据模型发生变化时（可能是由于用户输入或其他原因导致的更新），Vue 的响应式系统会通知视图进行更新，以反映数据模型的新状态。例如，对于以下代码：

<input v-model="message">

Vue 会将其转换为类似于以下的代码：

<input :value="message" @input="message = $event.target.value">

这里，: 表示属性绑定，@ 表示事件监听。当输入框的值发生变化时，input 事件被触发，并执行对应的更新函数，从而实现双向绑定。 v-model 还可以用于自定义组件，通过在组件上使用 model 选项来指定 prop 和事件，以实现更复杂的双向绑定逻辑。总之，v-model 的原理是基于 Vue 的响应式系统和事件监听机制，实现视图与数据模型之间的同步更新。

25. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？

如果某个页面有几百个函数需要执行，可能会导致页面性能下降，因为每个函数的执行都会消耗一定的CPU资源和时间。为了优化页面性能，可以考虑以下几个方面：

减少函数数量：
- 评估是否所有函数都是必要的，移除不必要的函数。
- 合并功能相似的函数，减少重复代码。
使用更高效的数据结构：
- 使用更高效的数据结构来存储和处理数据，如使用Map代替Object来管理键值对。
避免不必要的重新渲染：
- 在使用框架（如React、Vue等）时，避免不必要的组件重新渲染。
- 使用shouldComponentUpdate、React.memo或Vue的computed属性来避免不必要的更新。
使用Web Workers：
- 将一些复杂的计算任务转移到Web Worker中执行，避免阻塞主线程。
节流和防抖：
- 对于频繁触发的事件处理函数（如resize、scroll等），使用节流（throttle）或防抖（debounce）技术限制函数执行的频率。
异步执行：
- 使用async、await、Promise等异步技术，避免长时间运行的函数阻塞主线程。
代码拆分：
- 使用代码拆分技术（如Webpack的动态import），按需加载函数，减少初始加载时间。
利用缓存：
- 对计算结果使用缓存，避免重复计算。
优化算法：
- 优化算法，减少时间复杂度和空间复杂度。
使用硬件加速：
- 对于图形和动画相关的操作，使用CSS3的硬件加速特性，如transform和opacity。
监控和性能分析：
- 使用性能分析工具（如Chrome DevTools）来识别瓶颈。
服务器端渲染（SSR）：
- 使用服务器端渲染来减少客户端的计算负担。
懒加载：
- 对于非关键资源或函数，使用懒加载技术，按需加载。
减少DOM操作：
- 减少DOM操作的频率和复杂性，因为DOM操作通常比JavaScript计算更耗时。
使用虚拟DOM：
- 如果使用的是原生JavaScript，考虑使用虚拟DOM库（如React或Vue）来减少直接的DOM操作。通过结合以上策略，可以显著提高页面性能，即使有大量函数需要执行。重要的是进行性能分析，找出瓶颈，然后针对性地进行优化。

26. 说说 Vuex 的原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的原理可以从以下几个方面来理解：

状态存储：
- Vuex 使用一个单一的状态树，即一个对象，来存储整个应用的状态。这个状态树被存储在 Vue 实例中的 store 对象里。
单向数据流：
- Vuex 遵循单向数据流的原则，即状态的变化只能通过提交（commit）mutation来实现，mutation必须是同步函数。
Mutation：
- Mutation 是唯一改变状态的方式，它们是一些方法，用于直接修改状态。每个 mutation 都有一个字符串的类型的名字和一个处理函数。
Action：
- Action 类似于 mutation，不同在于：
  - Action 提交的是 mutation，而不是直接变更状态。
  - Action 可以包含任意异步操作。
Getter：
- Getter 可以被看作是 store 的计算属性，用于派生出一些状态，例如对状态进行过滤或合并。
模块化：
- Vuex 允许将 store 分割成模块（module），每个模块拥有自己的状态、mutation、action、getter，甚至是嵌套子模块。
响应式：
- Vuex 中的状态是响应式的，当状态发生变化时，Vue 组件会自动更新。这是通过 Vue 的 Vue.set 方法实现的。
插件：
- Vuex 支持插件系统，可以通过插件来进行状态持久化、日志记录等。
严格模式：
- Vuex 可以开启严格模式，在这种模式下，任何直接修改状态的行为都会被警告。
时间旅行调试：
- 由于 Vuex 的状态变化都是可追踪的，因此它可以与一些调试工具（如 Vue Devtools）配合使用，实现时间旅行调试。 Vuex 的核心思想是通过对状态变更的管理，使得状态的变化可预测、可追踪，从而使得大型应用的状态管理变得更加容易。通过集中管理状态，Vuex 也使得组件之间的状态共享变得更加简单。

27. 如何让 Proxy 去监听基本数据类型？

在 JavaScript 中，Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。然而，Proxy 本身只能用于对象，不能直接用于基本数据类型（如数字、字符串、布尔值等），因为基本数据类型不是对象。如果你想要“监听”基本数据类型的变化，通常的做法是使用一个包装对象来间接实现。以下是一些方法：

使用对象包装基本数据类型：你可以创建一个对象，将基本数据类型作为这个对象的属性，然后通过 Proxy 来监听这个对象。

let value = 10;
const wrapper = { value };
const handler = {
  set(target, property, newValue) {
    if (property === 'value') {
      console.log(`Value changed from ${target.value} to ${newValue}`);
      target.value = newValue;
      return true;
    }
    return false;
  }
};
const proxy = new Proxy(wrapper, handler);
// 改变值时，会触发 set 拦截器
proxy.value = 20; // 输出: Value changed from 10 to 20

使用 ES6 的 Box 模式： Box 是一种模式，它通过一个对象来“包装”值，然后通过 Proxy 来监听这个对象。

class Box {
  constructor(value) {
    this.value = value;
  }
}
const box = new Box(10);
const handler = {
  set(target, property, newValue) {
    if (property === 'value') {
      console.log(`Value changed from ${target.value} to ${newValue}`);
      target.value = newValue;
      return true;
    }
    return false;
  }
};
const proxy = new Proxy(box, handler);
// 改变值时，会触发 set 拦截器
proxy.value = 20; // 输出: Value changed from 10 to 20

使用 Object.defineProperty：对于单个属性，你也可以使用 Object.defineProperty 来定义属性的getter和setter，从而实现监听。

let _value = 10;
const obj = {};
Object.defineProperty(obj, 'value', {
  get() {
    return _value;
  },
  set(newValue) {
    console.log(`Value changed from ${_value} to ${newValue}`);
    _value = newValue;
  }
});
// 改变值时，会触发 setter
obj.value = 20; // 输出: Value changed from 10 to 20

需要注意的是，这些方法都是通过间接的方式来实现对基本数据类型的“监听”，因为 Proxy 本身并不直接支持基本数据类型。在实际应用中，根据具体需求选择合适的方法。

28. Proxy 能够监听到对象中的对象的引用吗？

是的，Proxy 可以监听到对象中的对象的引用变化。当使用 Proxy 来代理一个对象时，你可以拦截对这个对象属性的访问和修改，包括属性值为对象的情况。如果你修改了对象中的对象引用，Proxy 的 set 拦截器会被触发。以下是一个示例，展示了如何使用 Proxy 来监听对象中对象引用的变化：

const handler = {
  set(target, property, newValue) {
    console.log(`Setting ${property} to ${newValue}`);
    target[property] = newValue;
    return true;
  }
};
const obj = {
  innerObj: { key: 'value' }
};
const proxy = new Proxy(obj, handler);
// 修改 innerObj 的属性，不会改变 innerObj 的引用
proxy.innerObj.key = 'new value'; // 这不会触发 set 拦截器
// 改变 innerObj 的引用
proxy.innerObj = { newKey: 'newValue' }; // 这会触发 set 拦截器，输出: Setting innerObj to [object Object]

在这个示例中，当直接修改 innerObj 的属性时，不会改变 innerObj 的引用，因此不会触发 set 拦截器。但是，当你将 innerObj 的引用指向一个新的对象时，set 拦截器会被触发。需要注意的是，Proxy 的拦截是针对属性的，而不是属性值的变化。如果你想要深入监听对象中的对象的所有变化（包括其属性的变化），你需要为内部的每个对象也创建一个 Proxy。这通常涉及到递归地应用 Proxy，或者使用库如 mobx 或 vue 的响应式系统来实现深层的监听。

2025面试大全（10）

1. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？

2. React 为什么要废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate 这三个生命周期钩子？它们有哪些问题呢？React 又是如何解决的呢？

3. css 中的 animation、transition、transform 有什么区别？

1. transition（过渡）

2. transform（变换）

3. animation（动画）

区别总结：

4. 为什么 react 需要 fiber 架构，而 Vue 却不需要？

React为什么需要Fiber架构？

Vue为什么不需要Fiber架构？

总结

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

1. 兼容性问题

2. 调度控制

3. 延迟问题

4. 测试和调试

5. 自定义调度器

6. 性能优化

7. 后备方案

React的解决方案

总结

6. MessageChannel 是什么，有什么使用场景？

MessageChannel 的基本结构

使用场景

注意事项

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

React

React DOM

关系

示例

8. React Portals 有什么用？

主要用途：

优势：

示例：

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

1. 同步代码

2. 异步代码（例如 setTimeout）

3. Promise

4. async/await

总结

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

1. 模块化

2. 易于集成

3. 可扩展性

4. 学习曲线平缓

5. 社区和支持

举例：Vue.js

总结

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

1. Props / Events（父子组件通信）

2. Event Bus（事件总线）

3. Vuex（状态管理）

4. Provide / Inject（依赖注入）

5. attrs/attrs / attrs/listeners（跨级组件通信）

6. Refs / $refs（直接访问）

7.全局状态管理（如Redux、MobX等）

总结

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

1. 使用全局样式

2. 显式地使用全局类

3. 使用穿透选择器

4. 动态样式

5. 使用内联样式

6. 使用CSS-in-JS库

7. Shadow DOM

注意事项

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

1. 原理概述

2. 处理过程

Step 1: 添加唯一属性

Step 2: 修改样式

3. 结果

4. 其他框架的实现

5. 优点

6. 注意事项

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

1. 使用scoped属性

2. Vue如何处理scoped样式

3. 编译后的结果

1. `transition`（过渡）

2. `transform`（变换）

3. `animation`（动画）

5. $attrs /$ listeners（跨级组件通信）

1. 使用`scoped`属性

2. Vue如何处理`scoped`样式

`created` 钩子

`mounted` 钩子