前端精髓-React

React的几大原理：
虚拟 DOM（Virtual DOM）：React 通过使用虚拟 DOM 实现高效的 DOM 更新。当状态发生变化时，React 不会直接操作真实的 DOM，而是先在内存中构建一颗虚拟 DOM 树，然后通过对比新旧虚拟 DOM 树的差异，最小化 DOM 操作，从而提升性能。
单向数据流：React 中数据是单向流动的，父组件向子组件传递数据通过 props，子组件要修改父组件的数据需要通过回调函数等方式触发父组件的改变。这种单向数据流使得数据流动更加可控，易于追踪数据变化。
组件化：React 将 UI 拆分成独立且可重用的组件，每个组件都有自己的状态（state）和属性（props）。组件化开发使得代码更加模块化、易于维护和测试。
生命周期方法：React 组件具有生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount 等，开发者可以在不同的生命周期方法中执行相应的操作，例如发起网络请求、更新组件状态等。
JSX：JSX 是 JavaScript 语法的扩展，允许在 JavaScript 中编写类似 HTML 的代码。React 使用 JSX 来描述 UI 结构，使得代码更加直观和易读。
diff原理
Diff（差异比较）算法是 React 中实现高效更新虚拟 DOM 的核心原理之一。通过 diff 算法，React 可以找出新旧虚拟 DOM 之间的差异，并只更新需要改变的部分，而不是重新渲染整个 DOM 树。React 的 diff 算法使用的是深度优先遍历（DFS）来比较新旧虚拟 DOM 树的节点。从根节点开始，先对比当前节点，然后递归地比较子节点。

在进行节点比较时，React 会根据节点的类型和属性进行判断，并在需要的情况下更新相关部分。这种深度优先遍历的方式能够更高效地找到差异，并只更新需要改变的部分，而不会遍历整个虚拟 DOM 树。

这种算法可以提高性能，并减少不必要的 DOM 操作，从而提升用户界面的渲染效率。

React 的 diff 算法大致包含以下步骤：
- 树的遍历：React 通过深度优先遍历比较新旧虚拟 DOM 树的节点。首先比较根节点，然后递归比较子节点，直到遍历完整棵树。
- 同类型节点的比较：如果新旧节点的类型相同（例如都是 div），React 会比较它们的属性和子节点。
  
  a. 属性比较：React 会逐个比较新旧节点的属性，并更新有变化的属性。
  
  b. 子节点比较：React 会逐个比较新旧节点的子节点。这里使用了一个叫做key的特殊属性来优化比较过程。当新旧节点的顺序发生变化时，React 会尽量复用已存在的 DOM 节点，减少 DOM 操作次数。
不同类型节点的处理：如果新旧节点的类型不同（例如一个是 div，另一个是 span），React 会直接替换整个节点及其子节点，不再深入比较。
React的工作流程大致如下：

创建组件：定义React组件，包含render()方法，用于描述组件的外观。

构建虚拟DOM：通过调用render()方法，React会返回一个虚拟DOM树，表示组件的当前状态。

比较差异：React会将前后两次的虚拟DOM树进行比较，找出差异。

更新DOM：根据差异，React仅更新需要更改的部分，而不是重新渲染整个页面。

React为什么要使用redux

React 本身是一个用于构建用户界面的 JavaScript 库，它专注于视图层的构建和管理。然而，随着应用规模的增长，状态管理变得更加复杂，特别是涉及到跨组件之间的数据共享和状态管理时，React 的内置状态管理机制可能显得不够灵活和高效。

Redux 是一种用于管理应用状态的可预测状态容器，它提供了一种统一的状态管理解决方案，使得在大型应用中更容易地管理和维护状态。Redux 为 React 应用提供了以下优势：

单一数据源：Redux 将应用的整个状态存储在单一的数据源中，这样可以更容易地追踪应用的状态变化，从而使状态管理更可预测。
统一的状态管理：通过 Redux，可以在整个应用中采用相同的模式来管理状态，这样可以降低代码复杂度，提高可维护性。
便于调试：Redux 提供了时间旅行调试工具，可以轻松地回溯到之前的状态，帮助开发者更好地理解应用状态的变化。
方便的数据共享：Redux 提供了便捷的数据共享机制，允许多个组件之间共享状态，并且可以通过统一的方式进行状态更新。

虽然使用 Redux 增加了一些额外的概念和代码量，但在大型应用中，它能够提供更加清晰、可维护和可预测的状态管理机制，使得应用的状态变化更加可控和透明。因此，当应用变得复杂时，引入 Redux 可以有效地帮助管理 React 应用的状态。

Redux基本原理：

Redux是一个用于管理应用程序状态的JavaScript库。它采用单一的全局状态树(store)来存储应用程序的数据，使得状态变化可预测并易于跟踪。Redux使用纯函数(reducers)来处理状态的变化，并通过发布-订阅模式来通知组件状态的变化。

Redux的核心概念包括：

Store：存储应用程序的状态，并提供了一些方法来访问和更新状态。

Action：描述状态的变化，必须包含一个type字段来指定操作类型。

Reducer：纯函数，根据传入的action和当前的状态，返回一个新的状态。

Dispatch：用于发送action的方法，通过dispatch将action传递给reducer进行处理。

Subscribe：通过订阅store的方法，可以实时监听状态的变化。

Redux的工作流程大致如下：

创建store：定义一个全局唯一的store，存储应用程序的状态。

定义reducers：编写纯函数reducers来处理不同类型的action，根据当前状态和action返回新的状态。

发送action：使用dispatch方法发送action，触发状态的变化。

更新state：reducers通过接收action和当前状态，返回新的状态。

订阅state：通过subscribe方法，监听状态的变化，更新相应的组件。

整个redux工作流程：

首先，用户（通过View）发出Action，发出方式就用到了dispatch方法。

store.dispatch(action)

然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回新的State

let nextState = todoApp(previousState, action)

State一旦有变化，Store就会调用监听函数store.subscribe，来更新View。

//设置监听函数

store.subscribe(listener)

function listerner() {

let newState = store.getState(); component.setState(newState);

}

到这儿为止，一次用户交互流程结束。可以看到，在整个流程中数据都是单向流动的，这种方式保证了流程的清晰。

对于返回的结果，必须要使用 Object.assign ( )来复制一份新的 state，否则页面不会跟着数据刷新。

Reducers必须是一个纯函数，它根据action处理state的更新，如果没有更新或遇到未知action，则返回旧state；否则返回一个新state对象。__注意：不能修改旧state，必须先拷贝一份state，再进行修改，也可以使用Object.assign函数生成新的state。

Reducer 为什么要返回一个新的state

这是因为 Redux 使用了浅比较（shallow comparison）来检测状态的变化，如果直接修改原始状态对象，那么 Redux 将无法检测到状态的变化，从而无法触发组件的重新渲染。只有通过返回一个新的状态对象，Redux 才能检测到状态的变化，并且通知相关的组件进行更新。

为什么要用State?

在 React 中使用 state 的主要目的是管理组件的内部状态和数据。State 可以存储和跟踪组件随时间变化的数据，并且可以用于更新组件的呈现结果。
动态呈现数据：使用 state 可以将组件的数据与 UI 元素关联起来。当 state 更新时，React 会自动重新渲染组件，并相应地更新 UI。
响应性：通过使用 state，组件可以对用户的交互和数据更改作出响应。当用户与组件进行交互或数据发生变化时，可以更新组件的 state，然后重新渲染并展示最新的状态。
状态共享：通过将 state 传递给组件树中的子组件，可以方便地在整个应用程序中共享状态。这使得在不同组件之间共享数据变得更加简单。
控制组件行为：使用 state 可以控制组件的行为和显示效果。根据不同的状态值，组件可以根据情况选择渲染特定的内容或执行特定的操作。
性能优化：React 使用一种称为 Virtual DOM 的机制来高效地更新实际的 DOM。通过使用 state，React 可以比较前后两次渲染的状态差异，并只更新实际发生更改的部分，从而提高性能。
需要注意的是，在使用 state 时应该遵循 React 的单向数据流原则，即只应该通过 setState() 方法来更新组件的 state。这样可以确保数据的一致性和可追溯性。

总而言之，使用 state 是为了实现动态、响应性和可共享的组件状态管理，从而使得 React 组件能够根据数据变化灵活地更新和展示 UI。

reducer如何管理数据？

初始化状态：首先，定义一个初始状态（initial state），该状态包含应用程序中需要管理的各种数据。这通常是一个对象，可以根据需求进行嵌套和组织。

定义 Reducer 函数：Reducer 函数是一个纯函数，它接收当前的状态和操作（action），并根据操作类型更新状态。Reducer 函数具有以下结构：

function reducer(state, action) {

  switch (action.type) {

    case 'ACTION_TYPE_1':

      // 根据操作类型进行相应的状态更新

      return updatedState1;

    case 'ACTION_TYPE_2':

      // 另一种操作类型的状态更新

      return updatedState2;

    default:

      return state;

  }

}

在 Reducer 函数内部，可以根据不同的操作类型（action.type）使用 switch 语句来处理状态的更新逻辑。

创建 Store：将 Reducer 函数与状态管理库进行关联，创建一个 Store 对象。Store 负责存储应用程序的状态，并提供访问状态和触发动作的方法。

发起操作（Dispatch Actions）：通过执行特定的操作（称为 action）来触发状态的更新。操作是一个描述性的对象，它至少包含一个 type 属性，用于指定操作的类型。

Reducer 更新状态：当操作被分发到 Store 后，Reducer 函数将根据操作的类型执行相应的逻辑，并返回一个新的状态。状态的更新是通过 Reducer 函数中返回的新状态来实现的。

访问状态：可以通过从 Store 中获取当前状态来访问更新后的数据，以便在应用程序的其他部分使用。

通过这个过程，我们可以利用 Reducer 来管理和更新前端应用程序的状态。这种状态管理模式的好处在于，使应用程序变得可预测和可维护，并支持对状态的时间旅行调试（time-travel debugging）和状态的持久化等高级功能。

React异常获取-错误边界（Error Boundary）：

错误边界是一种 React 组件，它可以捕获和处理子组件中的 JavaScript 错误，从而防止整个组件树崩溃。你可以在函数组件的父组件中创建错误边界，在它的子组件中捕获异常。错误边界需要通过 React 的生命周期方法来实现。

class ErrorBoundary extends React.Component {

  constructor(props) {

    super(props);

    this.state = { hasError: false };

  }

  componentDidCatch(error, info) {

    console.error('发生错误:', error);

    this.setState({ hasError: true });

  }

  render() {

    if (this.state.hasError) {

      return <div>发生错误，请稍后重试。</div>;

    }

    return this.props.children;

  }

}

function MyComponent() {

  return (

    <ErrorBoundary>

      {/* 可能会出错的子组件 */}

      {/* ... */}

    </ErrorBoundary>

  );

}

try-catch 捕获异常

function MyComponent() {

  try {

// 执行可能会抛出异常的代码

  } catch (error) {

    // 处理异常

    console.error('发生错误:', error);

  }

  return (

    // 组件的 JSX 内容

    // ...

  );

}

React严格模式开启与关闭？

手动开启严格模式：

在应用程序的入口文件（通常是 index.js）中，将根组件包裹在 <React.StrictMode> 组件中。例如：

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

这样一来，在开发环境中，React 会对组件渲染过程中的潜在问题发出警告，并执行额外的检查以帮助你发现潜在的 bug 或不良实践。

手动关闭严格模式：

如果你想在开发环境中关闭严格模式，可以直接将根组件渲染在普通的 <div> 中，而不是 <React.StrictMode>。例如：

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <div>

    <App />

  </div>,

  document.getElementById('root')

);

这样做会禁用严格模式下的警告和额外的检查，但也意味着你可能会错过一些潜在问题的提示。

严格模式有什么好处？

React 的严格模式提供了一些好处，有助于开发者编写更健壮和高质量的 React 应用程序。下面是一些严格模式的好处：

潜在问题的检测：严格模式下，React 会在开发环境中执行额外的检查，以帮助开发者发现潜在问题和不良实践。这些检查包括对过时的 API 使用、不安全的生命周期方法、副作用检测等。

不安全操作的警告：严格模式下，React 会在开发环境中发出警告，提示可能会引起 bug 的不安全操作。例如，在组件渲染期间进行的一些不应该的操作，如副作用产生、状态更新可能导致死循环等。

隐藏已弃用的特性：严格模式下，React 会隐藏已弃用的特性和 API，以防止被误用。这鼓励开发者使用更现代和更可靠的特性来构建应用程序，并避免使用已不推荐的方法。

提高性能：严格模式下，React 会有一些性能优化，包括使用 key 属性来检测组件重排、不安全的生命周期方法的性能警告等。这些优化可以帮助开发者改进应用程序的性能表现。

总之，严格模式提供了一种开发期间的辅助工具，帮助开发者发现潜在问题、遵循最佳实践，并改善应用程序的性能。它可以提高代码质量，减少潜在bug，并为开发人员提供更好的开发体验。尽管严格模式只在开发环境中生效，但建议在开发过程中使用它来受益于其提供的好处。

React组件间通信方式:

父子组件通信（Props）：

通过父组件向子组件传递props属性，子组件可以通过props接收并使用这些数据。
父组件可以更新props的值，子组件会重新渲染以展示最新的数据。

子组件向父组件通信（Callback）：

父组件可以通过props将回调函数传递给子组件。
子组件可以在适当的时候调用该回调函数，将需要传递的数据作为参数传递给父组件。

兄弟组件通信（共享状态提升）：

如果两个兄弟组件需要通信，可以将共享的状态提升到它们的共同父组件中。
父组件通过props将状态传递给各个子组件，并将更新状态的方法传递给另一个子组件，实现兄弟组件之间的通信。

使用Context：

Context提供了一种在组件树中共享数据的方式，可以避免通过props一层层传递数据。
可以在根组件中创建Context，并在需要共享数据的组件中使用Context.Provider提供数据，然后在其他组件中使用Context.Consumer或useContext钩子来获取数据。

使用Redux或MobX等状态管理库：

Redux和MobX等状态管理库提供了一种集中管理应用状态的方式，可以在任意组件中读取和更新状态。
组件通过Dispatch Action或直接修改状态，然后订阅这些状态的组件会自动更新。

使用事件总线（Event Bus）：

可以在应用中使用事件总线来发送和监听事件，实现组件间的松耦合通信。
事件总线可以是一个独立的模块，也可以使用第三方库如EventEmitter来实现。

React Render过程

React的render过程是将组件转化为虚拟DOM，再将虚拟DOM转化为实际的DOM元素。这样可以高效地更新和管理界面的变化。

React存储数据

// 保存数据到localStorage

localStorage.setItem('key', 'value');

// 从localStorage中获取数据

const value = localStorage.getItem('key');

// 保存数据到sessionStorage

sessionStorage.setItem('key', 'value');

// 从sessionStorage中获取数据

const value = sessionStorage.getItem('key');

使用redux-persist

import { createStore } from 'redux';

import { persistStore, persistReducer } from 'redux-persist';

import storage from 'redux-persist/lib/storage';

const persistConfig = {

key: 'root',

storage,

};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);

const persistor = persistStore(store);

useEffect和useLayoutEffect的区别

useEffect和useLayoutEffect都是React提供的副作用钩子函数，用于在组件渲染完成后执行一些额外的操作。它们之间的主要区别在于触发时机和对性能的影响。

如果传递了第二个参数，在数据进行改变的时候，只有当被监听的数据发生变化才会执行这个方法，否则不会执行

useEffect( () =>{ ......... }，[props])

触发时机：

useEffect会在组件渲染完成后异步执行，也就是说它不会阻塞渲染过程，等到浏览器空闲时才会执行。因此，它不会阻塞页面的交互和用户体验。

useLayoutEffect会在组件渲染完成后同步执行，即它会在DOM更新之后、页面重新渲染前立即执行。这意味着它可能会阻塞页面的渲染和交互，因此需要注意性能问题。

对性能的影响：

useEffect不会阻塞页面渲染，并且会在浏览器空闲时执行，因此对性能的影响较小。适用于大多数情况下，不需要立即获得最新渲染结果的副作用操作。

useLayoutEffect会在DOM更新之后立即执行，然后再进行页面渲染，因此会阻塞页面渲染和交互。如果在useLayoutEffect中执行耗时操作或导致页面重绘的操作，可能会导致性能问题。适用于需要在DOM更新后立即获得最新布局结果的副作用操作，例如测量元素尺寸或执行需要准确布局信息的动画。

综上所述，一般情况下，推荐使用useEffect，因为它对性能影响较小且不会阻塞页面渲染。只有在确实需要在DOM更新后立即获得最新布局结果时，才应考虑使用useLayoutEffect。

React 高阶函数（Hoc）

在 React 中，高阶函数是一种用于增强组件的函数。它接受一个组件作为参数，并返回一个新的增强版组件。

React 高阶函数可以实现以下功能：

组件逻辑重用：通过将一些通用的组件逻辑封装到高阶函数中，我们可以在不同的组件之间共享这段逻辑代码，提高代码的复用性。

属性代理：高阶函数可以修改传递给被包裹组件的属性，并将修改后的属性传递给包裹组件。这样可以对属性进行控制和修改，实现一些横切关注点（cross-cutting concerns），比如日志记录、权限验证等。

渲染劫持：高阶函数可以修改组件的渲染过程，例如在渲染前后执行一些额外的逻辑、修改组件的输出等。

下面是一个简单的示例，演示了一个高阶函数的用法：

function withLogger(WrappedComponent) {

return function WithLogger(props) {

console.log(`Rendering ${WrappedComponent.name}`);

return <WrappedComponent {...props} />;

};

}

function MyComponent(props) {

return <div>{props.message}</div>;

}

const EnhancedComponent = withLogger(MyComponent);

/* 渲染 EnhancedComponent，输出：

Rendering MyComponent

<div>Hello, World!</div>

ReactDOM.render(<EnhancedComponent message="Hello, World!" />, document.getElementById('root'));

在上述示例中，withLogger 是一个高阶函数，它接受一个组件 WrappedComponent 作为参数，并返回一个新的组件 WithLogger。这个新组件在渲染前会输出一条日志信息，然后将所有属性传递给 WrappedComponent 进行渲染。

通过将 MyComponent 组件传递给 withLogger，我们得到了一个增强版的组件 EnhancedComponent，它具有额外的日志输出功能。

可以看到，通过高阶函数，我们可以方便地对组件进行增强和扩展。React 社区中已经有很多常用的高阶函数，例如 connect（用于连接组件到 Redux 状态管理库）、withRouter（用于将路由信息传递给组件）等等。使用这些高阶函数可以提高开发效率，并使代码更易于维护和组织。

HOOKS的理解

Hooks 是 React 16.8 版本引入的一项功能，它允许在函数组件中使用状态（state）和其他 React 特性，以前只能在类组件中使用。Hooks 的目标是解决在组件之间复用状态逻辑的问题，使得函数组件的编写更简洁、可读性更高。

使用 Hooks 可以在函数组件中使用以下特性：

useState：用于在函数组件中添加状态管理。通过调用 useState 函数，可以声明一个状态变量，并返回该变量及其更新函数。状态变量在组件渲染过程中保持持久化，通过更新函数可以改变状态的值。

useEffect：用于执行副作用操作，比如订阅数据、操作 DOM 或发起网络请求等。通过调用 useEffect 函数，可以在组件渲染或状态变化时执行指定的回调函数。

useContext：用于在组件树中访问上层组件的 Context。通过调用 useContext 函数，可以获取传递给 Context.Provider 组件的值。

useReducer：用于在函数组件中使用 Reducer 模式管理复杂的状态逻辑。通过调用 useReducer 函数，可以定义状态的更新逻辑，返回当前状态和派发更新的函数。

useCallback、useMemo：用于优化性能，避免不必要的重复计算。useCallback 用于缓存回调函数，useMemo 用于缓存计算结果。

useRef：用于在函数组件渲染之间存储和访问可变值。useRef 返回一个可变的 ref 对象，可以通过该对象的 current 属性来读取或修改值。

使用 Hooks 的好处是可以更自然地编写组件，避免了类组件中使用 this 关键字和继承等复杂概念。同时，Hooks 提供了一种优雅的方式来共享状态逻辑，并使得组件的逻辑更易于测试和重用。但需要注意的是，Hooks 必须按照规则在组件的顶层调用，不能在条件语句、循环或嵌套函数中调用。

什么是React prop drilling，如何避免？

React prop drilling 是指在组件层级较深的情况下，将 props 通过多个中间组件传递到目标组件的过程。这种情况下，需要逐层地将 props 传递下去，使得组件之间的关系变得紧密耦合，代码维护和调试都会变得困难。

为了避免 React prop drilling，我们可以采用以下方法：

使用 Context API：React 提供了 Context API，它可以在组件树中跨越多层级传递数据，而不需要显式地通过 props 传递。通过创建一个 Context 对象，并使用 Context.Provider 将值传递给需要访问该值的子组件，从而避免了 prop drilling。

使用 Redux 或其他状态管理库：Redux 和其他状态管理库提供了一种集中式的数据管理方式，可以使组件之间共享数据更加简单。通过将数据存储在全局的 store 中，组件只需从 store 中读取数据，无需手动传递 props。

使用 React Hooks：React Hooks 提供了一种在函数组件中管理状态的方式，通过 useState、useEffect 等 Hook 可以在组件之间共享数据和影响组件行为。

使用组件组合和抽象：将组件分解为更小的可复用组件，并使用组件组合的方式构建页面。这样可以减少组件之间的层级关系，减少 prop drilling 的需要。

使用 React Router：如果 prop drilling 是由于路由信息的传递而造成的，在 React 中可以使用 React Router 来管理路由，并通过路由参数来传递数据。

以上方法可以根据实际情况选择使用，但需要注意保持代码的可维护性和可扩展性。避免过度依赖 Context API 或全局状态管理，以免引入新的问题并增加代码复杂性。要根据项目需求和团队实际情况选择合适的解决方案。

React setState实现过程

在 React 中，setState 是用于更新组件状态的方法。它是异步的，并且会触发组件的重新渲染。

下面是 React 中 setState 的大致实现过程：

当调用组件的 setState 方法时，React 会将新的状态对象合并到当前状态对象中。
React 会检查是否有挂起的批量更新，如果有，则将新的状态对象添加到批量更新队列中。如果没有挂起的批量更新，则创建一个新的批量更新队列，并将当前组件加入到队列中。
当批量更新被触发时（通常在事件处理函数、生命周期方法或异步操作中），React 开始遍历批量更新队列中的组件。
对于每个组件，React 会计算出新的虚拟 DOM 树（即将更新后的状态应用到组件的 render 方法中生成新的虚拟 DOM 树）。
React 会将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，找出需要更新的部分。
找到需要更新的部分后，React 会将这些更新放入到一个更新队列中。
更新队列中的更新会被批量执行，React 会将更新应用到实际的 DOM 中，从而更新页面显示。
更新完成后，React 会触发相应的生命周期方法（如 componentDidUpdate），并将批量更新队列清空。

需要注意的是，setState 是异步的，这意味着在调用 setState 后并不会立即更新组件状态和重新渲染组件。React 会将多个连续的 setState 调用合并为一个批量更新，以提高性能并避免不必要的重渲染。如果需要在 setState 后立即访问更新后的状态，可以使用回调函数作为 setState 的第二个参数。

此外，React 还提供了另一种方式来进行状态更新，即使用函数形式的 setState。通过传递一个函数作为 setState 的参数，React 会将该函数执行后的返回值作为新的状态值。这种方式可以避免因为异步操作导致的过时状态问题。

React Diff算法是怎么运作

每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新，假如有prop不一样，那么react会判定该节点有更新，那么重渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点

React组件间通信方式

在 React 中，组件间通信是一个常见的需求。下面是几种常用的 React 组件间通信方式：

父向子Props 传递：通过使用 props 将数据从父组件传递给子组件。父组件可以将数据作为 props 属性传递给子组件，在子组件中通过 props 来访问和使用这些数据。
子向父回调函数：父组件可以将一个函数传递给子组件，子组件在需要时调用该函数并传递数据给父组件。这种方式可以实现子组件向父组件传递数据或触发某些操作。
Context API：React 的 Context API 允许跨多层级的组件传递数据，而不需要通过 props 一层一层地传递。父组件可以创建一个 Context 对象，并使用 Context.Provider 包裹子组件树，然后子组件可以通过 Context.Consumer 或 useContext 钩子来获取 Context 中的数据。
全局状态管理库：使用全局状态管理库（例如 Redux、MobX 或 Recoil）可以将数据保存在全局的状态中，不同组件之间可以通过订阅和修改全局状态来实现通信。
发布-订阅模式：可以使用第三方库（例如 PubSub.js）来实现发布-订阅模式，在组件之间进行事件的订阅和触发，实现通信。
组件组合：通过将多个组件组合在一起形成一个更大的组件，从而实现组件之间的通信。这种方式可以通过组件嵌套和 props 传递来实现。

需要根据具体的场景和需求选择合适的通信方式。通常情况下，Props 传递和回调函数是最常用且简单的方式。如果组件层级较深，或者需要在跨越多层级的组件之间进行通信，可以考虑使用 Context API 或全局状态管理库。而发布-订阅模式和组件组合则适用于更复杂的通信需求。

为什么虚拟DOM会提高性能

虚拟DOM 相当于在js 和真实DOM中间加了一个缓存，利用DOM Diff 算法避免了没有必要的DOM操作，从而提高性能

具体实现步骤如下：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

React 中 refs 干嘛用的？

在 React 中，Refs（引用）是一种访问组件实例或 DOM 元素的方式。它允许我们直接访问 DOM 元素或在类组件中访问组件实例，并进行一些操作。

使用 Refs 可以实现以下功能：

访问 DOM 元素：通过创建一个 ref 对象并将其分配给组件中的元素，在需要时可以通过该 ref 访问和操作该元素的属性和方法。比如获取表单输入框的值、修改元素样式等操作。

访问组件实例：在类组件中，通过创建一个 ref 对象并将其分配给组件实例，可以直接访问该组件实例上的方法和属性。这在某些情况下可以方便地与组件进行交互，比如调用组件的方法、获取组件内部状态等。

使用 Refs 的常见方法有两种：

创建 Ref 对象：在函数组件中，可以使用 useRef 钩子函数来创建一个 ref 对象。例如：

import React, { useRef } from 'react';

function MyComponent() {

const ref = useRef();

// 在需要的地方使用 ref

// ...

return <div ref={ref}>Hello, World!</div>;

}

在上述示例中，我们通过 useRef 创建了一个名为 ref 的 ref 对象，并将它赋值给 <div> 元素的 ref 属性。这样就可以在需要的地方使用 ref.current 来访问该 DOM 元素。

回调 Ref：在类组件中，可以通过回调函数的方式创建一个 ref。例如：

import React, { Component } from 'react';

class MyComponent extends Component {

constructor(props) {

super(props);

this.ref = null;

}

setRef = (element) => {

this.ref = element;

};

render() {

return <div ref={this.setRef}>Hello, World!</div>;

}

在上述示例中，我们创建了一个名为 ref 的属性，并使用 setRef 方法将 DOM 元素传递给该属性。通过设置 ref={this.setRef}，我们使得 <div> 元素的实例可以在 this.ref 中访问。

React的深比较与浅比较

浅比较（Shallow Comparison）：浅比较是React默认的比较方式。当组件接收到新的props或state时，React会使用浅比较来判断前后两个值是否相等。浅比较只会比较引用的地址是否相同，而不会深入比较对象内部的值。

例如，对于以下代码：

const obj1 = { name: 'John', age: 25 };

const obj2 = { name: 'John', age: 25 };

console.log(obj1 === obj2); // false

使用浅比较时，obj1和obj2被认为是不相等的，因为它们是不同的对象。

在React中，当props或state中的值发生变化时，如果使用浅比较，React会认为值没有变化，组件不会重新渲染。

深比较（Deep Comparison）：深比较是一种自定义的比较方式，可以在React中手动实现。它会递归比较对象的每个属性值，判断是否相等。

在React中，通常使用shouldComponentUpdate或React.memo等方法来实现深比较。这些方法可以根据组件的props或state返回一个布尔值，指示是否重新渲染组件。

深比较的实现需要开发者自行编写逻辑，通常使用递归、循环或第三方库（如lodash）来进行深度比较。

需要注意的是，深比较会增加计算成本，因为需要对每个属性进行比较。在一些情况下，浅比较已经足够满足需求，可以避免不必要的性能损耗。

综上所述，React中默认采用浅比较来判断是否需要重新渲染组件，但也可以通过深比较来手动实现更细粒度的控制。

React中diff与Vue中Diff的区别？

React的Diff算法：

React使用了一种称为"Reconciliation"（协调）的算法来执行diff过程。
当做对比时，React会逐层遍历整个虚拟DOM树，在找到差异的节点后，会更新该节点及其子节点的真实DOM。
React对比时，默认情况下，会使用"key"属性作为唯一标识来进行优化。它会将新旧列表的元素按照"key"进行对比，并且尽可能复用DOM节点。
对于列表渲染，React采用了一种称为"keyed diff"的算法，通过对比差异的项并更新它们，而不是完全重建整个列表。

Vue的Diff算法：

Vue使用了一种称为"Virtual DOM Patching"的算法来执行diff过程。
当做对比时，Vue会通过比较新旧虚拟DOM树的节点，找到差异的节点，并生成一系列操作指令。
Vue使用了一种双端比较策略，从根节点同时开始比较新旧虚拟DOM树的节点，以提高效率。
Vue的diff算法对于列表渲染采用了基于"key"的原地更新策略，类似React。不同的是，Vue不仅会复用DOM节点，还会相应地更新模板中的指令和绑定。

总结：

React和Vue都使用了虚拟DOM diff算法来优化性能。
React通过协调算法和"key"属性来进行差异对比和更新。
Vue通过虚拟DOM Patching算法和双端比较策略进行差异对比和更新。
在列表渲染方面，React和Vue都采用了基于"key"的优化策略，并尽可能复用DOM节点。

如何理解VUE双向数据流？

在Vue中，双向数据流是指数据的变化可以同时影响视图的更新，以及视图的交互也可以修改数据。具体来说，它包含以下几个方面的理解：

数据驱动视图更新：Vue使用了响应式系统，当应用程序的数据发生改变时，Vue会自动检测到变化并更新相应的视图。这意味着当我们修改Vue实例中的数据时，相关的视图会自动更新以反映数据的变化。
视图修改数据：除了数据的更新能够影响视图，Vue还提供了多种方式让视图修改数据。例如，我们可以通过表单输入元素（如input、select等）的v-model指令实现在视图中修改数据，并且这些变化也会自动同步到数据中。
v-model指令：v-model指令是Vue实现双向数据绑定的关键。它可以用于表单元素上，并且能够将表单元素的值与数据进行双向绑定。当用户在视图中修改表单元素的值时，相应的数据会自动更新；反之，当数据发生改变时，表单元素的值也会自动更新。
父子组件之间的通信：在Vue中，父子组件之间的数据传递和通信也是双向的。父组件可以通过props属性向子组件传递数据，子组件可以修改父组件传递的数据，从而实现了父子组件之间的双向数据流。

总的来说，Vue的双向数据流使得数据和视图之间的同步变得更加简单和自动化。不仅可以通过数据的改变来驱动视图的更新，还可以通过视图的交互来修改数据。这种双向数据流模式使得开发者能够更加方便地管理和控制数据与视图之间的关系。

什么是受控组件与非受控组件？

受控组件（Controlled Component）和非受控组件（Uncontrolled Component）是React中处理表单元素（input、select、textarea等）的两种不同方式。

受控组件：受控组件是由State来控制的，即表单元素的值由React组件的State来管理。

在受控组件中，表单元素的value属性被绑定到一个State变量，并通过onChange事件处理函数来更新State的值。每当用户输入发生变化时，State都会更新，并且将新的值反映在表单元素上。

通过这种方式，可以对用户的输入进行完全控制，可以对输入进行验证和处理，以及实时地获取和修改输入的值。

非受控组件：非受控组件是由DOM自身管理的，即React组件没有直接控制表单元素的值。

在非受控组件中，表单元素的值由DOM节点自身管理，我们可以通过ref来获取DOM节点。而不再通过State来控制表单元素的值。

在需要获取表单元素的值时，可以使用ref来引用DOM节点，并在需要的时候通过ref获取其值。

选择受控组件还是非受控组件取决于具体的需求：

如果需要对用户的输入进行完全控制，对输入进行验证、处理或实时获取输入的值，应使用受控组件。

如果只需要获取表单元素的值，而不需要对输入进行控制或处理，可以使用非受控组件，这样会减少一些代码的编写和管理。

需要注意的是，受控组件相对于非受控组件来说，需要更多的代码来实现，并且需要维护相应的State。因此，在选择使用受控组件或非受控组件时，应根据具体情况来进行权衡和选择。

React优化手段

React有哪些优化性能的手段

类组件中的优化手段

使用纯组件 PureComponent 作为基类。
使用 React.memo 高阶函数包装组件。
使用 shouldComponentUpdate 生命周期函数来自定义渲染逻辑。

方法组件中的优化手段

使用 useMemo。
使用 useCallBack。

其他方式

在列表需要频繁变动时，使用唯一 id 作为 key，而不是数组下标。
必要时通过改变 CSS 样式隐藏显示组件，而不是通过条件判断显示隐藏组件。
使用 Suspense 和 lazy 进行懒加载，例如：

React组件性能提升实现方法详解

组件卸载前执行清理操作
通过纯组件提升组件性能(类组件)
通过shouldComponentUpdate生命周期函数提升组件性能
函数组件使用memo 减少渲染次数
- memo的基本使用
- 为memo 方法传递自定义比较逻辑
通过组件懒加载提供应用性能
- 路由组件懒加载
- 根据条件进行组件懒加载
通过使用占位符标记提升React组件的渲染性能
- 使用Fragment 避免额外标记
通过避免使用内联函数提升组件性能
在构造函数中进行this指向的更正
类组件中的箭头函数
优化条件渲染以提升组件性能
避免重复的无限渲染
为应用程序创建错误边界
避免数据结构突变
优化依赖项大小

以下是一些常见的React优化手段：

使用Key属性：在使用列表渲染时，为每个列表项添加key属性。这样React可以根据key来判断它们的唯一性，从而更高效地更新和渲染组件。
避免不必要的重新渲染：使用React.memo()或PureComponent来避免函数组件或类组件的不必要重新渲染。这些方法会对组件的props进行浅比较，只有在props发生变化时才会触发重新渲染。

import React, { memo } from 'react';

const MemoizedComponent = memo(({ prop }) => {

// 组件的渲染逻辑

});

export default MemoizedComponent;

使用Virtual DOM：React通过Virtual DOM来进行高效的DOM更新。虚拟DOM允许React在内存中构建和操作DOM，然后再将差异部分更新到实际的DOM上，减少了性能开销。
懒加载（Lazy Loading）：使用React.lazy()和Suspense来实现组件的懒加载。这样可以延迟加载不必要的组件，提高应用的初始加载速度。

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <LazyComponent />

    </Suspense>

  );

}

列表的合理使用：在处理大量数据列表时，尽量避免直接在JSX中进行大量计算和操作，可以先处理数据，并使用数组方法如map()生成新的JSX代码片段，减少重复计算。

function ListComponent({ items }) {

  const renderedItems = items.map((item) => {

    // 对每个列表项进行处理

    const processedItemData = processItem(item);

    return <li key={item.id}>{processedItemData}</li>;

  });

  return <ul>{renderedItems}</ul>;

}

使用shouldComponentUpdate或React.memo()进行性能优化：在使用类组件时，可以通过重写shouldComponentUpdate方法来手动控制组件是否需要重新渲染。对于函数组件，可以使用React.memo()来根据props进行浅比较来避免不必要的重新渲染。

import React, { Component, memo } from 'react';

class MyComponent extends Component {

  shouldComponentUpdate(nextProps, nextState) {

    // 根据需要进行props和state的浅比较

    // 返回true表示需要重新渲染，返回false表示不需要重新渲染

  }

  render() {

    // 组件的渲染逻辑

  }

}

const MemoizedComponent = memo(({ prop }) => {

  // 组件的渲染逻辑

});

export default MemoizedComponent;

使用批量更新：使用setState的回调函数形式或使用useEffect钩子进行批量更新，减少不必要的重渲染。

import React, { useState } from 'react';

function MyComponent() {

  const [count, setCount] = useState(0);

  const handleButtonClick = () => {

    setCount((prevCount) => prevCount + 1);

    setCount((prevCount) => prevCount + 1);

  };

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={handleButtonClick}>Increase Count</button>

    </div>

  );

}

避免在render方法中执行副作用：为了提高性能和避免不必要的副作用，应该将副作用的逻辑放在componentDidMount、componentDidUpdate等生命周期方法中，或使用useEffect钩子。

import React, { useEffect } from 'react';

function MyComponent() {

  useEffect(() => {

    // 在组件挂载或更新时执行副作用逻辑

    // 返回清理函数时，在组件销毁时执行清理逻辑

    return () => {

      // 清理逻辑

    };

  }, []);

  return <div>Component Content</div>;

}

使用React DevTools进行性能分析：React DevTools是Chrome浏览器的插件，可以帮助我们分析组件的渲染性能，找到性能瓶颈并进行优化。
使用组件级别的代码拆分（Code Splitting）：使用React.lazy()和React Suspense，将应用按路由或按需进行代码拆分，以实现更快的加载速度和更好的用户体验。

import React, { lazy, Suspense } from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));

const About = lazy(() => import('./About'));

function App() {

  return (

    <Router>

      <Suspense fallback={<div>Loading...</div>}>

        <Switch>

          <Route path="/" exact component={Home} />

          <Route path="/about" component={About} />

        </Switch>

      </Suspense>

    </Router>

  );

}

以上是一些常见的React优化手段，根据具体情况可以选择适合的优化方法来提升React应用的性能和用户体验。

class与hoc的区别

Class组件是使用class语法定义的React组件，通过继承React.Component类来创建。它可以管理自身的状态和生命周期，适用于处理有状态和生命周期需求的情况。

高阶组件（HOC）是函数，接受一个组件作为参数，并返回一个新的组件。它通过包裹组件并传递额外的功能或数据来实现组件的复用和功能增强。

Redux与Mobx的区别？

Redux和Mobx都是JavaScript状态管理库，用于管理React应用程序中的状态。它们有一些区别：

设计理念：Redux采用了Flux架构的思想，它强调使用单一的、不可变的状态树来描述整个应用程序的状态。Redux鼓励使用纯函数来处理状态的变化，通过派发action触发状态变更的流程。而Mobx则采用了观察者模式，它允许在任何地方定义可观察的数据，并在数据变化时自动更新相关组件。

代码复杂性：相对而言，Redux更加严格和规范，它有明确的设计规范和约束条件。Redux的学习曲线较陡峭，需要理解和遵循一些概念，如reducer、action和中间件等。相比之下，Mobx的使用更加灵活简单，无需太多的额外代码和配置。

API复杂性：Redux提供了一系列的API来管理状态，如createStore、dispatch、getState等。Redux的api相对较多，并且需要编写大量的样板代码来定义action和reducer。与之相比，Mobx的API更加简洁，开发者可以使用装饰器或装饰语法轻松地标记可观察的数据和自动更新的依赖。

性能：Redux使用了不可变数据结构和纯函数来实现状态管理，这保证了良好的性能和可预测性。但是在某些情况下，Redux可能会产生较多的中间状态和冗余的更新。相对而言，Mobx通过观察者模式可以在精确追踪依赖的同时进行局部更新，从而提供更好的性能。

综上所述，Redux更适合需要严格约束和可预测性的大型应用程序，而Mobx更适合小型或中型应用程序，特别是需要更灵活开发体验的场景。选择Redux还是Mobx取决于您对状态管理的需求、项目规模和个人偏好。

什么是Flux架构？

Flux是一种架构模式，用于构建前端应用程序的数据流管理。

Flux架构的核心思想是单向数据流，通过明确的数据流动路径来管理应用程序的状态和行为。它包含以下几个关键概念：

视图（View）：用户界面的组件。它接收来自Store的状态数据，并将其渲染到页面上。视图可以触发Action来表示用户的交互行为。

动作（Action）：动作表示对应用程序状态的更新请求。通常是一些简单的JavaScript对象，包含一个type字段来描述动作的类型，以及其他任意数据。

分派器（Dispatcher）：分派器是一个中央调度器，负责接收所有的动作，并将它们传递给相应的Store。它确保动作依次被处理，且不会并发执行。

存储（Store）：存储是应用程序的状态容器。它负责管理状态数据，并响应动作的处理。存储将根据动作的类型来更新状态，并通知视图进行更新。

Flux的数据流遵循以下顺序：视图 —> 动作 —> 分派器 —> 存储 —> 视图。这意味着视图触发动作，动作被分派器接收并传递给相应的存储，存储更新状态并通知视图进行重新渲染。

Flux架构的优势在于其清晰的数据流动和单向性，使得应用程序的状态变得可预测和易于理解。它也促进了组件的解耦和可复用性，因为存储可以独立于视图进行测试和演化。

需要注意的是，Flux只是一种架构模式，并不是一个具体的实现。Redux是基于Flux思想的一种流行的实现方式，但也有其他的Flux实现库，如Fluxxor和Alt.js等。

React如何处理跨域并列出代码

首先，在你的 React 项目根目录下创建一个名为 setupProxy.js 的文件。

1.在 setupProxy.js 文件中，使用 http-proxy-middleware 库来设置代理服务器：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {

   app.use(

      '/api',

      createProxyMiddleware({

         target: 'http://api.example.com',

         changeOrigin: true,

      })

   );

};

上述示例中，将所有以 /api 开头的请求转发到 http://api.example.com。

2.修改 package.json 文件，添加一个 "proxy" 字段，指向代理服务器的地址：

"proxy": "http://localhost:5000"

上述示例中，代理服务器运行在 http://localhost:5000。

启动代理服务器和 React 开发服务器：

bash

$ node server.js # 启动代理服务器

$ npm start # 启动 React 开发服务器

代理服务器会转发任何以 /api 开头的请求到目标服务器。

请注意，这只是一个简单的示例。具体的配置可能需要根据你的实际需求进行调整。

另外，如果你的 API 服务器支持跨域资源共享（CORS），也可以在服务器端启用 CORS 来处理跨域请求。具体的实现方式可能因服务器而异，你可以参考服务器框架的文档来配置 CORS。在这种情况下，React 无需特殊处理跨域问题。

React16 与18版本的差异

React 18 进一步完善了并发模式，并引入了 React Concurrent Mode（实验性特性）。这使得 React 应用能够更好地利用浏览器空闲时间，并进行更精细的任务调度，以实现更高效的渲染和数据加载。
React 18 引入了新的 React Hooks API，如 useEffect() 和 useLayoutEffect()。这些钩子函数提供了更清晰、简洁的方式来处理组件的副作用和状态管理。
React 18 进一步优化了服务器端呈现，提供了新的服务器端渲染 API，如 createRoot() 和 renderToStringAsync()。这些改进使服务器端呈现更加灵活和高效。
文本节点的处理：
React 18 对文本节点进行了优化，特别是在动态变化的文本内容方面。它使用更高效的算法来比较和更新文本节点，以减少不必要的重渲染。

除了上述差异，React 18 还带来了其他一些改进和新功能，如新的 JSX 转换、新的调试工具和错误边界的改进等。总体而言，React 18 在性能、并发模式和开发体验方面相对于 React 16 有了显著的提升，并提供了更多实用的功能和API。

JS
Js深拷贝与浅拷贝

浅拷贝（Shallow Copy）：浅拷贝是指创建一个新的对象或数组，然后将原始对象或数组的引用复制给新对象或数组。这意味着新对象或数组与原始对象或数组共享相同的内存地址，当修改其中一个对象或数组时，另一个也会受到影响。

在JavaScript中，可以使用Object.assign()方法或Array.slice()方法来进行浅拷贝。

示例代码：

const obj = { name: 'John', age: 25 };

const shallowCopy = Object.assign({}, obj);

shallowCopy.age = 30;

console.log(obj); // { name: 'John', age: 25 }

console.log(shallowCopy); // { name: 'John', age: 30 }

在上述示例中，Object.assign()方法用于浅拷贝对象。修改shallowCopy的age属性并不会影响原始的obj对象。

深拷贝（Deep Copy）：深拷贝是指创建一个全新的对象或数组，并将原始对象或数组的所有属性值递归地复制到新对象或数组中，新对象或数组与原始对象或数组完全独立，互不影响。

在JavaScript中，常见的深拷贝方法包括递归拷贝和使用JSON序列化与反序列化。

示例代码：

const obj = { name: 'John', age: 25 };

const deepCopy = JSON.parse(JSON.stringify(obj));

deepCopy.age = 30;

console.log(obj); // { name: 'John', age: 25 }

console.log(deepCopy); // { name: 'John', age: 30 }

在上述示例中，通过使用JSON.stringify()将对象转换为字符串，再使用JSON.parse()将字符串转换回对象，实现了深拷贝。修改deepCopy的age属性不会对原始的obj对象产生影响。

需要注意的是，深拷贝可能会导致性能损耗，特别是在处理嵌套层级较深或包含循环引用的复杂对象时。此外，对于某些特殊类型的对象（如函数、正则表达式等），深拷贝可能无法完全保留其特性。

因此，在进行拷贝操作时，需要根据具体情况选择适合的拷贝方式。浅拷贝适用于只需复制对象的第一层属性，而深拷贝适用于需要完全独立复制整个对象或数组的情况。

JS面向对象编程

在 JavaScript 中，面向对象编程的核心概念包括类（class）、对象（object）、属性（property）、方法（method）等。

// 定义一个类

class Person {

  // 构造函数，用于创建对象实例并初始化属性

  constructor(name, age) {

    this.name = name;

    this.age = age;

  }

  // 方法

  sayHello() {

    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

  }

}

// 创建对象实例

const person1 = new Person("Alice", 25);

// 调用对象的方法

person1.sayHello(); // 输出：Hello, my name is Alice and I'm 25 years old.

js事件机制

JavaScript 事件机制是用于处理用户交互和异步操作的一种机制。

事件监听器（Event Listeners）：通过添加事件监听器函数，可以在特定事件发生时执行相应的代码。常见的事件包括点击（click）、鼠标移动（mousemove）、键盘按下（keydown）等。可以使用 addEventListener() 方法向元素注册事件监听器。

事件对象（Event Object）：当事件触发时，会生成一个与该事件相关的事件对象。事件对象中包含了与事件相关的信息，如事件类型、目标元素、鼠标坐标等。可以通过事件监听器的参数来访问事件对象。

事件冒泡和捕获（Event Bubbling and Capturing）：在嵌套的 HTML 元素中，当一个事件被触发时，将依次触发该元素及其父元素的相同事件。事件冒泡是从目标元素向上冒泡，而事件捕获则是从最外层元素向下捕获。可以通过 addEventListener() 方法的第三个参数来指定事件是在事件冒泡阶段处理还是在事件捕获阶段处理。

inner.addEventListener('click', handleInnerClick, true); // 在事件捕获阶段处理

事件委托（Event Delegation）：通过将事件监听器绑定到父元素，可以利用事件冒泡机制，在父元素上处理子元素的事件。这样可以节省代码量，并且能够动态处理添加或删除的子元素。

const parent = document.querySelector('.parent');

function handleClick(event) {

  if (event.target.classList.contains('child')) {

    console.log('Child element clicked!');

  }

}

parent.addEventListener('click', handleClick);

axios如何取消请求、原理

首先执行的1步：source.token 为promise对象，用执行方式表达的话，是存放在异步队列中的

其次执行的2步：同样的axios请求也是promise对象，存放在异步队列中的

如果没有调用source.cancel方法的话，source.token不存在的，在执行的第二步当中，判断了cancelToken是否存在。存在则执行request.abort()。不存在则继续发送请求。

如果同步调用source.cancel方法的话，首先执行的1步赋值source.token，这样在第二步当中，判断cancelToken是否存在。存在则执行request.abort()

JS如何封装库并列出调用方法

使用立即执行函数 (Immediately Invoked Function Expression, IIFE) 封装库代码，并将接口暴露给全局对象或返回一个对象。这种方式可以创建私有作用域，避免污染全局命名空间。

(function(global) {

  // 私有变量和函数

  var privateVariable = '私有变量';

  function privateFunction() {

    console.log('私有函数');

  }

  // 公共接口

  var myLibrary = {

    publicVariable: '公共变量',

    publicFunction: function() {

      console.log('公共函数');

    }

  };

  // 将库暴露给全局对象

  global.myLibrary = myLibrary;

})(window);

调用方法示例：

// 调用库中的公共函数

myLibrary.publicFunction();

// 访问库中的公共变量

console.log(myLibrary.publicVariable);

使用模块模式封装库代码，通过返回一个包含公共功能的对象来实现封装。这种方式可以创建私有和公共成员，并提供更好的封装性。

var myLibrary = (function() {

  // 私有变量和函数

  var privateVariable = '私有变量';

  function privateFunction() {

    console.log('私有函数');

  }

  // 公共接口

  return {

    publicVariable: '公共变量',

    publicFunction: function() {

      console.log('公共函数');

    }

  };

})();

调用方法示例：

// 调用库中的公共函数

myLibrary.publicFunction();

// 访问库中的公共变量

console.log(myLibrary.publicVariable);

使用类 (Class) 来封装库，将相关的功能封装在类的方法中，并通过实例化类来使用这些功能。

class MyLibrary {

  constructor() {

    // 私有变量

    this.privateVariable = '私有变量';

  }

  // 私有函数

  _privateFunction() {

    console.log('私有函数');

  }

  // 公共函数

  publicFunction() {

    console.log('公共函数');

  }

}

// 实例化类

var myLibrary = new MyLibrary();

调用方法示例：

// 调用库中的公共函数

myLibrary.publicFunction();

// 访问库中的私有变量

console.log(myLibrary.privateVariable);

webPack有哪些参数？

--mode：设置 webpack 的构建模式，可选值为 "development"、"production" 或 "none"。示例：webpack --mode production

--entry：指定入口文件。示例：webpack --entry ./src/index.js

--output：指定输出文件目录和文件名。示例：webpack --output path=./dist filename=bundle.js

--module-bind：使用特定的 loader 处理匹配的文件类型。示例：webpack --module-bind js=babel-loader

--config：指定自定义的 webpack 配置文件。示例：webpack --config webpack.config.js

--watch：监听文件变化，并在文件变化后自动重新构建。示例：webpack --watch

--progress：显示构建进度。示例：webpack --progress

--devtool：配置Source Map 的生成方式。示例：webpack --devtool cheap-module-eval-source-map

如何提升webpack打包速度

要提升 webpack 的打包速度，可以考虑以下几个方面：

使用最新版本的 webpack 和相关插件：新版本的 webpack 通常会有性能优化和改进，更新到最新版本可以获取这些性能提升。
减少入口文件数量：每个入口文件都会触发一次完整的编译过程，因此减少入口文件数量可以减少编译时间。
使用缓存：通过配置合理的缓存策略，利用持久化缓存或者缓存-loader（如cache-loader）来避免重复编译没有改变的模块，从而提升构建速度。
启用多进程/多实例构建：使用 thread-loader 或者 happypack 插件可以将任务分配给多个子进程或者多个 worker 实例并行处理，利用多核 CPU 提升构建速度。
配置 resolve.extensions：在 webpack 配置中使用 resolve.extensions 配置项，明确指定文件的扩展名，避免 webpack 在解析模块路径时尝试所有可能的扩展名，从而加快解析速度。
优化 loader 配置：确保每个 loader 的配置尽可能简洁，避免对不必要的文件进行转换和处理。同时，可以针对不同类型的文件选择更高效的 loader。
使用 HappyPack 或 thread-loader 插件：这些插件可以将一些耗时的任务，如 Babel 转译、CSS 处理等，放到 Worker 线程中进行处理，提高构建速度。
Tree Shaking：通过配置 mode: 'production' 或启用 terser-webpack-plugin 优化插件，可以去除未使用的代码，减小打包后的文件大小。
减小文件体积：通过压缩代码、删除无用的注释、减少依赖库的体积等方式来减小打包后的文件体积。
使用 DLL（动态链接库）：将一些稳定不变的第三方库抽离为 DLL，避免每次构建时都重新编译这些库，从而减少构建时间。
使用 webpack-bundle-analyzer 分析构建结果：该工具可以帮助你分析构建过程中的资源占用情况，找出可能存在的性能问题，从而进行针对性的优化。

请注意，在进行性能优化时，根据项目的具体情况选择合适的优化策略，并在实际应用中进行测试和验证。同时，也要根据开发环境和生产环境的不同，针对性地选择合适的配置。

vite与webpack的区别

特性	Vite	Webpack
打包方式	开发模式基于 ESM，生产模式用 Rollup	开发和生产模式都基于静态分析打包
性能	开发模式极快，生产模式优秀	开发模式较慢，生产模式强大
开发体验	简单、快速、按需加载	复杂但功能强大
生态系统	新兴，依赖 Rollup	成熟，插件生态丰富
适用场景	现代前端项目，小型到中型项目	复杂项目，企业级应用

使用 HappyPack 插件：

const HappyPack = require('happypack');

module.exports = {

  // ...

  module: {

    rules: [

      {

        test: /\.js$/,

        exclude: /node_modules/,

        use: 'happypack/loader?id=js',

      },

    ],

  },

  plugins: [

    new HappyPack({

      id: 'js',

      loaders: ['babel-loader'],

    }),

  ],

};

使用 thread-loader 插件：

module.exports = {

  // ...

  module: {

    rules: [

      {

        test: /\.js$/,

        exclude: /node_modules/,

        use: ['thread-loader', 'babel-loader'],

      },

    ],

  },

};

使用 DLL 插件：

const webpack = require('webpack');

module.exports = {

  // ...

  plugins: [

    new webpack.DllReferencePlugin({

      manifest: require('./vendor-manifest.json'),

    }),

  ],

};

使用 cache-loader 插件：

module.exports = {

  // ...

  module: {

    rules: [

      {

        test: /\.js$/,

        exclude: /node_modules/,

        use: [

          'cache-loader',

          'babel-loader',

        ],

      },

    ],

  },

};

React如何使用WebSocket？

import React, { useEffect, useState } from 'react';

const WebSocketDemo = () => {

  const [message, setMessage] = useState('');

  const [ws, setWs] = useState(null);

  useEffect(() => {

    // 创建 WebSocket 连接

    const socket = new WebSocket('ws://localhost:8080');

    // 设置 WebSocket 对象到状态中

    setWs(socket);

    // 处理 WebSocket 打开连接事件

    socket.onopen = () => {

      console.log('WebSocket 已连接');

    };

    // 处理 WebSocket 收到消息事件

    socket.onmessage = (event) => {

      setMessage(event.data);

    };

    // 处理 WebSocket 关闭连接事件

    socket.onclose = () => {

      console.log('WebSocket 已关闭');

    };

    // 在组件卸载时关闭 WebSocket 连接

    return () => {

      socket.close();

    };

  }, []);

  // 发送消息

  const sendMessage = () => {

    if (ws && ws.readyState === WebSocket.OPEN) {

      ws.send('Hello WebSocket!');

    }

  };

  return (

    <div>

      <h1>WebSocket Demo</h1>

      <button onClick={sendMessage}>发送消息</button>

      <p>{message}</p>

    </div>

  );

};

export default WebSocketDemo;

上述代码创建了一个名为 WebSocketDemo 的 React 组件，其中包含一个按钮和一个段落元素来展示收到的消息。

在组件中使用 useEffect 钩子来初始化 WebSocket 连接。当组件渲染后，创建一个 WebSocket 对象并将其保存在状态中。然后，通过设置 WebSocket 对象的事件处理程序（onopen、onmessage 和 onclose）来监听连接状态和接收消息。在组件卸载时，使用 return 语句关闭 WebSocket 连接。

sendMessage 函数用于发送消息，在按钮被点击时调用。它检查 WebSocket 连接是否已建立并且处于打开状态，然后使用 send 方法发送消息。

注意要替换 new WebSocket('ws://localhost:8080') 中的 URL 为你实际的 WebSocket 服务器地址。

要使用这个 WebSocketDemo 组件，只需在你的应用程序中引入它并将其放置在适当的位置：

import React from 'react';

import ReactDOM from 'react-dom';

import WebSocketDemo from './WebSocketDemo';

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

这是一个简单的示例，可以根据实际需求进行扩展和定制。例如，你可以添加更多的逻辑来处理不同的消息类型，或使用 WebSocket 的其他方法和事件来满足你的需求。

浏览器原理?

浏览器是我们日常使用的用于访问互联网的软件应用程序。它在背后执行着复杂的工作，包括解析和渲染网页、处理用户输入、网络通信等。下面是浏览器的一般工作原理：

用户界面(UI)：浏览器的用户界面由地址栏、前进/后退按钮、书签等组成，提供给用户操作和交互。
网络通信：浏览器使用网络协议（如HTTP、HTTPS等）与服务器进行通信，发送请求并接收响应数据。
解析HTML：浏览器将接收到的HTML文档解析成DOM（文档对象模型）树，表示网页的结构。
构建渲染树：浏览器将DOM树与CSS样式表合并，构建渲染树（Render Tree），其中每个节点表示一个可见的UI元素。
布局和绘制：浏览器根据渲染树进行页面布局和绘制，确定每个元素在屏幕上的位置和外观。
JavaScript引擎：浏览器内置JavaScript引擎（如V8引擎），用于解释和执行网页中的JavaScript代码。
事件处理：浏览器处理用户的交互事件，例如点击、滚动等，触发相应的事件处理程序执行。
存储：浏览器提供多种方式来存储数据，包括Cookie、Web Storage（如localStorage和sessionStorage）、IndexedDB等。
安全机制：浏览器通过实施同源策略来限制跨域操作，以保护用户的安全。
扩展和插件：浏览器允许用户安装扩展和插件，以增强其功能和定制化。
渲染引擎：浏览器使用渲染引擎（如WebKit、Blink）将解析后的内容显示在屏幕上。

总之，浏览器通过解析、渲染、执行脚本等过程将网页转化为用户可交互的界面。不同浏览器可能采用不同的引擎和实现细节，但它们的基本原理大致相似。

Es6新特性

块级作用域：引入了let和const关键字，用于声明块级作用域的变量和常量。相较于var关键字，它们具有更严格的作用域规则。
箭头函数：使用箭头（=>）定义函数，提供了更简洁的语法和更方便的上下文绑定。箭头函数在许多情况下可以替代普通函数。
默认参数：在函数定义时，可以给参数设置默认值，如果调用时未传入对应参数，将使用默认值。
扩展操作符：使用扩展操作符（...）可以轻松地展开数组或对象，用于传递参数、合并数组等操作。
解构赋值：通过解构赋值语法，可以从数组或对象中提取值，并赋给对应的变量。这样可以更方便地进行数据提取和交换值。
模板字符串：使用反引号（`）创建模板字符串，可以在其中插入变量或表达式，并支持换行和多行字符串。
类与模块化：引入了class关键字，用于定义类和面向对象编程。另外，ES6还支持模块化的语法，通过export和import关键字实现模块的导出和导入。
Promise：用于处理异步操作的对象。Promise对象表示一个异步操作的最终完成或失败，并可以链式调用来处理结果。

简化的对象字面量：可以直接在对象字面量中使用变量作为属性名，省略冒号和function关键字定义方法。

迭代器和生成器：引入了可迭代对象和迭代器的概念，以及生成器函数的语法。这些功能可以简化迭代操作和异步编程。

Promise的理解

romise 是 ES 6 引入的一种用于处理异步操作的对象。Promise 可以看作是一种代表了未来结果的承诺（Promise），它可以是异步操作的结果或者异步操作失败的原因。

Promise 有三种状态：

Pending（进行中）：表示异步操作正在进行中，尚未完成。

Fulfilled（已成功）：表示异步操作已经成功完成，并且返回了一个值。

Rejected（已失败）：表示异步操作在执行过程中出现了错误或失败。

Promise 提供了以下方法来处理异步操作：

then()：通过 then() 方法注册回调函数，当 Promise 状态为 Fulfilled 时执行。

catch()：通过 catch() 方法注册回调函数，当 Promise 状态为 Rejected 时执行。

finally()：通过 finally() 方法注册回调函数，无论 Promise 的状态如何，都会执行。

Promise.all（）方法会等待所有的 Promise 解析或拒绝才返回结果，而 Promise.race（）方法只要有一个 Promise 解析或拒绝就会立即返回结果

// 创建一个 Promise 对象
const myPromise = new Promise((resolve, reject) => {
  // 模拟异步操作，比如发送一个 AJAX 请求
  setTimeout(() => {
    const success = true; // 模拟请求成功或失败的情况
    if (success) {
      resolve('请求成功'); // 异步操作成功，调用 resolve 方法并传递成功的结果
    } else {
      reject('请求失败'); // 异步操作失败，调用 reject 方法并传递失败的原因
    }
  }, 2000); // 延迟 2 秒模拟异步操作
});

// 使用 Promise 对象
myPromise.then((result) => {
  console.log(result); // 在异步操作成功时输出成功的结果
}).catch((error) => {
  console.error(error); // 在异步操作失败时输出失败的原因
});

普通函数和箭头函数的区别

箭头函数没有原型，原型是undefined
箭头函数this指向全局对象，而函数this指向引用对象
call，apply，bind方法改变不了箭头函数的指向

路由模式：hash和history

hash基于url传参会有体积限制,不会包括在http请求中对后端完全没有影响,改变hash不会重新加载页面; history可以在url里放参数还可以将数据存放在一个特定对象中.history模式浏览器白屏解决方法是在服务端加一个覆盖所有的情况候选资源,必须要服务端在服务器上有对应的模式才能使用,如果服务器没配置,可以先使用默认的hash。

React与Vue的区别？如何理解理解开发框架底层实现

理解Vue和React这两个开发框架的底层实现，可以从以下方面进行理解：

虚拟DOM（Virtual DOM）：Vue和React都使用了虚拟DOM作为底层实现的核心概念。虚拟DOM是一个轻量级的JavaScript对象树，它以组件树的形式描述了用户界面的结构和状态。通过对比新旧虚拟DOM树的差异，Vue和React能够高效地更新真实DOM来反映应用状态的变化。
组件系统：Vue和React都采用了组件化的开发模式。组件是可复用和独立的代码单元，具有自己的视图和行为。在底层实现上，Vue和React都提供了组件的定义、生命周期管理、状态管理等机制，使得开发者可以通过组件的抽象和复用来构建复杂的用户界面。
数据响应式：Vue和React都提供了一种响应式的数据绑定机制，使得数据的变化能够自动地更新对应的视图。在底层实现上，Vue使用了依赖追踪和观察者模式，而React使用了基于比较和事务的机制，来实现数据和视图之间的自动同步。

生命周期：Vue和React都具有生命周期的概念，用于控制组件在不同阶段的行为。在底层实现上，Vue和React提供了一系列的生命周期钩子函数，可以被开发者重写以执行特定的操作，如初始化组件、更新数据、销毁组件等。
架构和内部机制：Vue和React在内部实现上有一些不同。Vue采用了基于模板的方式，使用编译器将模板转换为渲染函数，最终生成虚拟DOM。而React则是使用JSX语法直接在JavaScript中编写UI组件，通过babel转译后生成虚拟DOM。

综上所述，理解Vue和React的底层实现需要深入研究它们的虚拟DOM、组件系统、数据响应式、生命周期、架构等核心概念和机制。通过阅读源代码、官方文档、相关书籍和参与社区讨论，能够更好地理解这两个框架的底层工作原理。

VUE的原理

Vue.js 是一种流行的前端框架，它采用了MVVM（Model-View-ViewModel）架构模式，并且以响应式数据驱动视图。

Vue.js 的工作原理可以简单概括为以下几个步骤：

模板解析：

Vue.js 使用基于 HTML 的模板语法，将组件的模板转换为虚拟 DOM。模板中的指令、表达式和事件绑定等都将被解析和处理。

数据响应化：

通过使用 Object.defineProperty 或 Proxy，Vue.js 将数据对象进行响应式化处理，使得当数据发生变化时，能够通知相关的视图更新。

编译：

Vue.js 将模板转换为渲染函数，生成虚拟 DOM。编译过程中会对模板中的指令、表达式进行静态优化，提高渲染效率。

虚拟 DOM 更新：

Vue.js 通过比较新旧虚拟 DOM 的差异，最小化地更新实际 DOM，从而提高性能。这个过程叫做虚拟 DOM 的 patch。

更新视图：

当数据发生变化时，Vue.js 会触发更新视图的过程，将变更反映到实际的 DOM 上。更新是异步执行的，并且会根据需要进行批量更新。

事件处理：

Vue.js 提供了一套事件系统，可以通过 v-on 指令绑定事件监听器，并在事件触发时执行相应的逻辑。

组件化开发：

Vue.js 支持将应用划分为多个组件，每个组件都是独立的、可复用的。通过组件化开发，可以提高代码的可维护性和复用性。

总之，Vue.js 的核心思想是响应式数据驱动视图，通过虚拟 DOM 和差异比较的方式实现高效的视图更新。同时，Vue.js 还提供了丰富的工具和特性来简化开发过程，并支持组件化开发，使得构建复杂的交互式应用更加容易。

VUE的Diff过程

创建虚拟 DOM 树：在 Vue 中，首先会根据模板或 render 函数创建一个虚拟 DOM 树，表示当前的视图状态。

渲染首次视图：将虚拟 DOM 转换为真实 DOM，并将其插入到页面中，完成首次的视图渲染。
触发状态变更：当数据发生变化时，通过 Vue 的响应式系统会检测到状态的变化，然后会触发重新渲染的过程。
创建新的虚拟 DOM 树：基于状态变更后的数据，Vue 会再次创建一个新的虚拟 DOM 树。
比较新旧虚拟 DOM 树：Vue 会将新旧虚拟 DOM 树进行逐节点的对比，找出需要更新的节点。
生成更新操作：在比较过程中，Vue 会标记需要进行更新的节点，并生成相应的操作，例如插入、删除、替换和属性更新等。
执行更新操作：根据生成的更新操作列表，Vue 会按照顺序执行这些操作，将变更应用到真实 DOM 上。
完成视图更新：更新完成后，视图就会反映出最新的状态。

通过 diff 算法的优化，Vue 可以最小化对真实 DOM 的操作次数，提高性能。diff 算法会尽可能复用已有的 DOM 节点，减少不必要的操作，以达到高效更新视图的目的。

路由跳转方式

router-link 标签跳转--- to 需要跳转到页面的路径

this.$router.push() ---跳转到指定url，点击回退返回到上一页。push是追加历史记录

this.$router.replace()----跳转到指定页url， replace是替代当前历史记录

this.$router.go(n)：（0：当前页，-1上一页，+1下一页，n代表整数）

vue组件通讯（即传值）？

父传子：主要通过props来实现的

具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

子传父：主要通过$emit来实现

具体实现：子组件通过绑定事件触发函数，在其中设置this.e m i t ( ‘要派发的自定义事件’，要传递的值 ) ， emit(‘要派发的自定义事件’，要传递的值)，emit(‘要派发的自定义事件’，要传递的值)，emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值

然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参数

兄弟之间传值有两种方法：

①：通过event bus实现

具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件A中通过bus.e m i t （’自定义事件名’，要发送的值）发送数据，在组件 B 中通过 b u s . emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接收数据

②：通过vuex实现

具体实现：vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括state,actions,mutations,getters和modules 5个要素，主要流程：组件通过dispatch到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态

如何使用Vue进行错误处理和异常捕获

全局错误处理：可以使用 Vue.config.errorHandler 来设置全局的错误处理函数，该函数会捕获所有未被捕获的错误。

Vue.config.errorHandler = function (err, vm, info) {

  // 错误处理逻辑

  console.error('Error:', err);

  console.error('Vue instance:', vm);

  console.error('Additional Info:', info);

};

组件内部错误处理：在单个组件中处理错误，可以使用 try-catch 块来捕获和处理特定代码块中的异常。

<template>

  <div>

    <button @click="handleClick">Click me</button>

  </div>

</template>

<script>

export default {

  methods: {

    handleClick() {

      try {

        // 可能产生异常的代码

      } catch (error) {

        // 错误处理逻辑

        console.error('Error:', error);

      }

    }

  }

};

</script>

Promise 异常捕获：如果是使用 Promise 进行异步操作，可以通过 .catch() 方法来捕获异常并进行处理。

someAsyncFunction()

  .then(response => {

    // 异步操作成功后的处理逻辑

  })

  .catch(error => {

    // 异常处理逻辑

    console.error('Error:', error);

  });

Vue Router 异常捕获：使用 Vue Router 进行路由跳转时，可以监听 beforeEach 钩子来捕获导航错误并进行处理。

router.beforeEach((to, from, next) => {

  // 进行一些导航判断和处理

  next();

});

router.onError(error => {

  // 错误处理逻辑

  console.error('Error:', error);

});

通过上述方式，你可以在 Vue 应用中进行错误处理和异常捕获。根据实际情况选择合适的方式，并在错误处理逻辑中采取适当的措施，例如日志记录、用户提示或回退操作，以提供更好的用户体验和代码健壮性。

Vuex

Vuex 是一个用于 Vue.js 应用程序的状态管理模式。它允许您在应用程序中集中管理和共享状态，并提供了一种可预测的方式来跟踪状态的变化。

Vuex 的核心概念包括以下几个要素：

State（状态）：应用程序中需要共享的数据存储在一个单一的状态树中，即状态对象。

Getters（获取器）：用于从状态中派生出衍生数据的方法。Getter 可以看作是仅读取状态的计算属性。

Mutations（突变）：用于修改状态的方法。每个突变都有一个字符串类型的事件类型和一个回调函数，它接收当前的状态作为第一个参数，并且可以接收额外的载荷数据作为第二个参数。

Actions（动作）：类似于 Mutations，但是可以执行异步操作。动作提交突变，并可以包含业务逻辑和异步操作。

Modules（模块）：将 Vuex 分割成多个模块，每个模块拥有自己的状态、突变、行动和获取器。这样可以更好地组织和管理大型的状态树。

使用 Vuex 的基本流程如下：

创建一个 Vuex 的 Store 对象，通过传入配置选项来定义初始状态、突变、行动和获取器。

在 Vue 组件中使用 this.$store 访问和修改状态，以及调度突变和行动。

使用 Getter 在组件中派生出衍生数据，并在计算属性中使用这些派生数据。

总的来说，Vuex 通过提供一种集中式的状态管理方法，使得应用程序更易于开发、调试和维护。它适用于复杂的应用程序，尤其是那些需要共享状态和进行异步操作的情况。

vuex 数据共享

首先，在你的应用程序中创建一个 Vuex 的 Store 对象。

可以使用 createStore 方法来创建一个新的 Store 对象，将其配置选项传递给该方法：

import { createStore } from 'vuex';

const store = createStore({

state: {

count: 0

mutations: {

increment(state) {

state.count++;

}

});

在上述示例中，我们定义了一个包含 count 状态的 Store 对象，并在 mutations 中定义了一个 increment 突变，用于增加 count 的值。

在你的组件中使用共享状态。可以通过在组件中的 computed 属性中访问状态，并使用 mapState 辅助函数来简化代码。在模板中也可以直接使用

$store.state 来访问状态：

<template>

  <div>

    <p>Count: {{ count }}</p>

    <button @click="increment">Increment</button>

  </div>

</template>

<script>

import { mapState, mapMutations } from 'vuex';

export default {

  computed: {

    ...mapState(['count'])

  },

  methods: {

    ...mapMutations(['increment'])

  }

};

</script>

在上述示例中，我们使用了 mapState 辅助函数将 count 状态映射到组件的计算属性中，并在模板中显示了该状态的值。同时，我们还使用了 mapMutations 辅助函数将 increment 突变映射到组件的方法中，并将其绑定到点击事件上。

这样，在多个组件中使用相同的 Store 对象时，它们可以共享同一份状态数据，并且对该数据进行突变操作时都会同步更新。

这只是一个简单的示例来说明在 Vuex 中如何实现数据共享。Vuex 还提供了更多高级功能，例如行动、获取器、模块等，用于更灵活和复杂的状态管理。你可以根据你的具体需求来使用这些功能来实现更强大的数据共享。

Element

"Element"通常指的是Element UI这个Vue的UI组件库，它提供了一系列的可复用的UI组件，可以在Vue项目中快速构建用户界面。

要使用Element UI，可以按照以下步骤进行：

安装Element UI：在终端中运行以下命令来安装Element UI依赖：

npm install element-ui

注册Element UI：在你的Vue项目的入口文件（通常是main.js）中，引入Element UI和样式，并将其注册为Vue的全局组件。

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在你的组件中使用Element UI组件：现在你可以在你的Vue组件中使用Element UI提供的各种组件了。例如，使用el-button组件：

<el-button type="primary">Primary Button</el-button>

</template>

以上是使用Element UI的基本步骤。你可以在Element UI的官方文档中查找更多组件和用法示例，以满足你的具体需求。

Vue 中，有多种方法可以实现数据共享

使用 props 和事件：可以通过父组件将数据通过 props 传递给子组件，然后在子组件中通过事件向父组件发送数据更新请求。这是一种父组件向子组件传递数据的简单且直接的方式。

使用 provide/inject：Vue 提供了 provide 和 inject 选项，可以在父级组件中使用 provide 提供数据，然后在子孙组件中使用 inject 来注入并使用这些数据。这种方式可以实现跨层级的数据共享。

使用全局事件总线：可以创建一个新的 Vue 实例作为事件总线，然后在需要共享数据的组件中使用 $emit 触发事件，并在其他组件中使用 $on 监听事件和获取数据。这种方式适用于简单的数据共享，但在大型应用中可能会导致事件冲突和难以追踪。

使用 Vuex：Vuex 是 Vue 的官方状态管理库，提供了一个集中式的状态管理方案。使用 Vuex 可以将共享数据存储在一个单一的状态树中，并通过定义 mutations 和 actions 来更新和操作数据。Vuex 提供了更高级的功能，例如模块化组织和异步处理，适用于需要复杂数据共享的应用程序。

根据具体情况和项目需求，选择适当的方法来解决数据共享问题。对于简单的场景，可以使用 props 和事件；对于跨层级的共享，可以使用 provide/inject；对于大型的复杂应用，推荐使用 Vuex 来实现更好的状态管理和数据共享。

VUE常见问题与高阶问题

常见问题：

响应式数据更新不生效：Vue 的响应式系统通过侦测数据变化来实现视图的更新，如果需要更新的数据没有被正确地设置为响应式，或者更新数据的方式不符合 Vue 的规范，可能导致界面无法更新。另外，还要注意避免直接修改数组或对象的元素。
子组件无法接收父组件传递的数据：通常是由于未正确使用 props 进行数据传递，检查 props 的名称是否一致、是否在子组件中声明等。
事件无法正常触发：可能是因为事件绑定的方式有误，或者事件名称错误。另外，在某些情况下需要使用修饰符（如 @submit.prevent）来阻止默认行为。
循环渲染时的 Key 错误：在使用 v-for 进行循环渲染时，要注意给每个循环项添加唯一的 key 属性，以帮助 Vue 更高效地更新 DOM。
异步操作引起的问题：Vue 的生命周期钩子函数、computed 属性和 watch 监听器等都是同步执行的，如果在这些地方进行了异步操作或请求，可能会导致问题。需要正确处理异步操作，例如使用 Promise、async/await 或回调函数。

高阶问题：

组件通信与状态管理：在大型应用中，组件之间的通信和共享状态是一个复杂的问题。可以使用 Vue 的状态管理库（如 Vuex）来集中管理组件状态，或者使用事件总线、发布订阅模式等方式进行组件间的通信。
性能优化：随着项目规模的增大，性能优化变得至关重要。可以通过减少不必要的重新渲染、异步组件加载、懒加载路由、使用虚拟滚动等方式来提升应用性能。
SSR（服务器端渲染）：当需要实现更好的 SEO、首屏加载速度等需求时，可以考虑使用 Vue 的服务器端渲染。这需要了解 Node.js 和 Vue SSR 相关的知识。
自定义指令和混入：除了常规的组件开发，Vue 还提供了自定义指令和混入的机制，可以扩展 Vue 的能力，封装通用逻辑，实现代码的复用。
服务端与客户端通信：当我们需要与服务端进行通信时，可以使用 Vue 提供的插件（如 axios）来发送 HTTP 请求，或者使用 WebSocket 进行实时通信。了解这些技术的使用和适配可以更好地与服务端集成。

前端怎么构建一个高性能高并发的vue框架

构建一个高性能高并发的 Vue 框架需要考虑多个方面，包括优化渲染性能、减少网络请求、缓存策略和并发处理等。下面列举了一些常见的优化策略，供参考：

优化渲染性能：

使用虚拟 DOM：Vue.js 默认使用虚拟 DOM，通过比较差异来最小化 DOM 操作，提高渲染效率。

合理使用计算属性和监听器：避免在模板中频繁使用复杂的表达式，可以将其提取为计算属性或监听器，减少重复计算的开销。

懒加载：对于复杂的组件或页面，可以采用懒加载的方式，按需加载，减少初始渲染的负荷。

减少网络请求：

文件压缩和合并：将多个 CSS 或 JavaScript 文件进行压缩和合并，减少请求次数和文件大小。

静态资源缓存：为静态资源设置适当的缓存策略，利用浏览器缓存，减少重复请求。

使用 CDN：将静态资源部署到 CDN 上，使用户可以从离其较近的服务器获取资源，减少延迟。

缓存策略：

利用缓存技术：借助浏览器缓存、HTTP 缓存或者使用缓存库，对频繁请求的数据进行缓存，减少服务器压力和网络请求次数。

本地缓存：可以使用浏览器提供的 LocalStorage 或 IndexedDB 等本地存储方案，将一些常用的数据缓存在客户端，减少与服务器的交互。

并发处理：

使用 Web Workers：通过将一些计算密集型任务转移到 Web Workers 中执行，释放主线程，提高并发处理能力。

异步请求：合理利用异步编程和事件驱动模型，避免阻塞主线程，提高并发处理能力。

代码优化:

代码拆分和按需加载：根据业务需求，将代码按功能模块进行拆分，并按需加载，减少不必要的代码加载和执行。

前端性能监控：使用性能监控工具，对前端性能进行实时监控和分析，及时发现性能瓶颈并进行优化。

以上只是一些常见的优化策略，具体的优化方案需要根据具体的应用场景和需求进行设计和实施。同时，还可以结合服务端的优化策略，如使用负载均衡、缓存、异步处理等，来实现更好的性能和并发能力。

多线程

Js中

Web Workers：JavaScript 中的 Web Workers 允许在后台运行脚本，以实现并行计算和异步操作。通过创建一个新的 worker 线程，可以在独立的线程中执行耗时的任务，而不会阻塞主线程。这对于执行计算密集型操作或处理大量数据非常有用。

React:

Web Workers：React 应用也可以使用 Web Workers 来进行并行计算。可以将耗时的计算任务放在 Web Worker 中，并通过 postMessage()/onmessage() 进行通信，从而在 React 组件中实现并发处理。

React Concurrent Mode：React Concurrent Mode 是 React 的一个实验性特性，旨在提高应用的响应性。它允许 React 应用在同一时间处理多个不同优先级的任务，并根据浏览器空闲时间进行任务调度。通过使用 Suspense 和优先级调度，可以更好地管理组件渲染和数据加载，从而提高用户体验。

Vue:

Web Workers：与 React 类似，Vue 应用也可以利用 Web Workers 来实现并行计算。通过将耗时的任务放在 Web Worker 中，并通过 postMessage()/onmessage() 进行通信，可以在 Vue 组件中实现并发处理。

构建一个活动页面框架，要求高并发高性能

构建一个高并发高性能的活动页面框架需要考虑多个方面，包括前端优化、后端优化和缓存策略等。

前端优化：

使用轻量级框架或库：选择性能较好的轻量级框架或库，如Vue.js或React.js，并合理使用组件化开发，提高页面的可复用性和可维护性。

减少HTTP请求数量：将多个CSS和JavaScript文件进行压缩合并，减少请求次数和文件大小，使用CDN加速静态资源加载。

图片优化：使用图片格式的优化工具进行压缩和缩放，选择合适的格式（如WebP）和适当的质量，以减小图片的加载大小。

懒加载：对于页面上的大量图片或资源，可以使用懒加载技术，仅在用户滚动到可见区域时才进行加载。

前端缓存：设置合适的缓存策略，包括浏览器缓存、CDN缓存和前端资源缓存，减少重复请求，提高页面加载速度。

后端优化：

代码优化：通过对后端代码进行性能优化，如合理使用缓存、减少数据库查询次数、优化算法等，提高后端处理请求的效率。

异步处理：使用异步编程模型，如使用异步I/O或事件驱动的编程方式，提高服务器的并发处理能力。

分布式部署：将服务部署到多台服务器上，并通过负载均衡器将请求分发到不同的服务器上，提高并发处理能力和系统的可用性。

数据库优化：通过对数据库进行索引优化、查询优化和数据缓存，减少数据库查询次数和数据库的负荷。

数据库读写分离：将读操作和写操作分离到不同的数据库实例上，以提高数据库的并发能力。

缓存策略：

静态资源缓存：对活动页面的静态资源（如CSS、JavaScript和图片等）设置适当的缓存时间，利用浏览器缓存和CDN缓存，实现就近访问和减轻服务器负载。

数据缓存：对活动页面中频繁读取的数据进行缓存，可以使用内存缓存、分布式缓存或数据库缓存，减少数据库访问次数和提高响应速度。

以上只是一些常见的优化策略，具体的优化方案需要根据具体的活动页面特点和需求进行设计和实施。同时，还应进行性能测试和监控，及时发现并解决性能瓶颈和问题，以达到高并发高性能的要求。

前端浏览器缓存有CDN文件，如果CDN已经是旧的，如何配置前端代码才能不清楚缓存拿到最新的CDN文件？

文件版本号或哈希值：将每个 CDN 文件的 URL 后面添加一个不同的版本号或哈希值，并在文件更新时修改版本号或哈希值。例如：

https://cdn.example.com/file.js?v=12345

当文件更新时，修改 v 参数的值，浏览器会认为这是一个新的 URL，从而重新加载最新的文件。

文件指纹：类似于版本号或哈希值，但这里使用的是文件内容的指纹生成的唯一标识。

例如，可以使用 Webpack 的插件 webpack-md5-hash 对文件内容进行哈希处理，将哈希值添加到文件名中。例如：

https://cdn.example.com/file.[hash].js

当文件内容发生变化时，哈希值也会改变，浏览器会请求新的文件。

设置缓存策略：通过设置 HTTP 响应头来控制浏览器缓存。在服务器端的响应中设置 Cache-Control 和 Expires 头，将缓存时间设置为0或禁用缓存。

例如：

Cache-Control: no-cache, no-store, must-revalidate

Expires: 0

这样浏览器会在每次请求时都向服务器验证文件是否已更新。

Sass与less的区别

Sass 使用 $ 符号来声明变量，例如 $color: red;。

Less 使用 @ 符号来声明变量，例如 @color: red;。

flex 实现垂直水平居中

.container {

  display: flex;

  align-items: center; /* 垂直居中 */

  justify-content: center; /* 水平居中，可选 */

  height: 100vh; /* 设置容器高度，可根据实际情况调整 */

}

Rem它是相对于根元素的 font-size 的倍数来计算实际的长度值,如果根元素的 font-size 设置为 16px，那么 1rem 就等于 16px，0.5rem 就等于 8px。

关于h5在ios和Android上的差异

title 问题:Android可以用 document.title来动态改变标题，ios不可以，需要通过加入一个iframe来让ios刷新title

微信分享问题:在h5做分享到微信时，会出现Android截取地址栏里 # 后的内容，iOS正常，所以用vue的hash模式开发h5时，若有此类问题，需配置成history模式，具体请参照官网。
刷新问题:vue开发时页面刷新有两种方法，一种是window.reload，另外一种是this.$router.go(0)，目前发现，前一种在Android上如果地址栏地址未发生变化则无效，后一种在iOS上无效，所以建议在vue开发时，尽可能的不用刷新来做业务逻辑，尽可能的使用数据驱动页面更新。这也是vue开发的特点。
input 问题:iOS上h5的input一直是个bug，输入以后不可以滑动，就是说输入的字超过了容器大小后，不能大小适应或者滑动查看以前已输入的内容，暂时的解决方案是用div做富文本编辑器，模拟input，但效果并不是很好，目前没有更好的代替方案。
时间问题:对于时间date对象，ios上是不能识别类似 2019-02-18 这种格式的，必须是 2019/02/18这种格式，而Android是完全两者都可识别，所以需要做下面这样的适配。后面研究发现，还可以使用下面这种方式同样兼容。new Date(2019, 06,01)
iOS上h5的动态插入的div添加click事件，在没有cursor：pointer；时，会出现点击click事件失效，同时，iOS上的h5会出现双击页面放大的情况。需要加上下面的代码。
video 标签: video在移动端的兼容性实在是太多，先说目前碰到的。
自动播放:静音播放两者都可以成功。Android可以利用iframe或者autoplay属性完成。微信内置浏览器需要属性 x5-video-player-type="h5"，或在wx.ready回调中使用video.play。
http 和https的混用:ios上http 和https不能混用，android上无影响。解决的办法是使用统一的协议。

前端网络安全策略

输入验证和过滤：对用户输入进行验证和过滤，确保只接受合法和预期的输入。使用输入校验、正则表达式等技术来检查和过滤用户输入，防止跨站脚本攻击（XSS）、SQL注入等漏洞。

跨站请求伪造（CSRF）防护：实施CSRF令牌机制，在每个请求中包含一个独特的令牌，用于验证请求的合法性，防止恶意网站伪造请求执行未经授权的操作。

密码安全策略：要求用户使用强密码，并使用哈希算法对密码进行加密存储，确保用户密码的安全性。同时，建议实施多重身份验证，如短信验证码、双因素认证等方式提升账户安全性。

安全的会话管理：使用安全的会话机制，为每个会话分配唯一的会话标识符，并定期更新会话令牌，以防止会话劫持和会话固定攻击。

HTTPS使用：采用HTTPS协议对数据进行加密传输，保障数据在传输过程中的安全性和完整性。

强化访问控制：根据用户角色和权限设置适当的访问控制机制，限制用户的操作权限，确保只有经过授权的用户可以访问特定的资源。

防止点击劫持：使用X-Frame-Options头或Content Security Policy（CSP）等机制来防止恶意网站通过iframe等方式嵌入并欺骗用户执行操作。

安全更新和补丁管理：及时更新和应用前端框架、依赖库和软件的安全补丁，以修复已知漏洞和安全问题。

安全日志和监控：实施安全日志记录和监控机制，及时检测和响应安全事件，监控异常行为和攻击尝试。

安全教育和培训：提供安全意识培训给开发人员和用户，加强对常见网络安全威胁和防范措施的认知。

HTTPS中间人攻击的简单过程

客户端向服务器发送连接请求。
攻击者插入自己的代理服务器，伪造一个看似合法的证书。
客户端信任并接受伪造证书。
客户端与攻击者的代理服务器建立连接。
攻击者代理服务器与真正的服务器建立连接。
攻击者可以窃听、篡改或窃取通信内容。
攻击者将修改后的数据重新加密，并发送给对方。
客户端和服务器可能无法察觉到数据已被篡改。

这样，攻击者就能够获取到加密通信中的敏感信息或操纵通信内容。

Cookie如何防范XSS攻击

要防范XSS攻击，可以进行输入验证和过滤，输出转义，使用HttpOnly标记和SameSite属性来保护Cookie，设置内容安全策略（CSP）以限制恶意脚本的执行，定期更新Cookie和Token以减少风险。

Set-Cookie: key=value; HttpOnly。

Cookie: key=value; SameSite=Strict。

如何理解前端工程化

前端工程化是指在前端开发过程中，使用各种工具、技术和流程来提高开发效率、代码质量和团队协作的一种方法。它涵盖了许多方面，包括构建工具、自动化、模块化、性能优化、代码规范、版本控制等。

下面是对前端工程化的一些主要方面的解释：

构建工具和自动化：前端工程化中常用的构建工具包括Webpack、Babel等，它们可以帮助我们自动处理资源的压缩、编译、转换、合并等任务。通过配置构建工具，我们可以将源代码转换为浏览器可执行的代码，并进行打包和优化，从而提高加载速度和性能。自动化工具（如Gulp、Grunt）可以帮助我们实现自动化任务，如自动刷新页面、自动压缩图片、自动部署等。
模块化：通过使用模块化的开发方式，我们可以将功能划分为小型、可复用的模块，然后通过模块导入导出的方式组合起来。这样做有助于提高代码的可维护性和可复用性，并且在开发过程中能够更好地管理依赖关系。
性能优化：前端工程化也关注网页性能的优化，例如静态资源（如图片、CSS、JavaScript）的压缩和合并，通过代码分割和按需加载优化页面加载速度，使用缓存策略减少网络请求等。
代码规范和质量：制定并遵循一致的代码规范有助于提高代码的可读性和可维护性。使用代码检查工具（如ESLint）可以帮助我们在编码过程中发现并纠正潜在的错误或不规范的代码。同时，可以采用单元测试、集成测试等方法来确保代码的质量和稳定性。
版本控制和团队协作：使用版本控制系统（如Git）有助于多人协作开发，追踪代码的变更历史，并能够方便地回退或合并代码。同时，也可以借助代码托管平台（如GitHub、GitLab）进行项目管理和团队协作。

综上所述，前端工程化通过使用各种工具和技术来提高前端开发效率和代码质量，使得开发者能够更专注于业务逻辑的实现，同时也促进团队间的协作和项目的可持续发展。

如何提升前端页面性能优化

提升前端页面性能优化可以从多个方面入手。下面列举了一些常见的方法和技巧：

压缩和合并文件：

压缩CSS、JavaScript和HTML文件，去除不必要的空格、注释和换行符。

将多个CSS文件合并成一个，将多个JavaScript文件合并成一个，减少网络请求次数。

图片优化：

使用适当的图片格式（如JPEG、PNG、WebP）并选择适当的压缩率，以减小图片文件的大小。

使用CSS Sprites将多个小图标合并成一张大图，减少HTTP请求数量。

使用懒加载（Lazy Loading）技术，延迟加载页面上不可见区域的图片。

缓存策略：使用浏览器缓存和CDN（内容分发网络）来缓存静态资源，减少服务器负载和提高页面加载速度。

使用版本号或文件指纹来让浏览器能够识别更新的文件，并重新下载。

延迟加载和异步加载：

将JavaScript脚本放在页面底部，或使用async或defer属性，使其不阻塞页面的渲染。

使用按需加载（Code Splitting）将页面内容分割成多个小块，只在需要时再进行加载。

DOM 操作和重绘：

减少不必要的DOM操作，因为DOM操作是昂贵的。

使用CSS动画或变换（Transform）代替JavaScript动画，可以利用浏览器的硬件加速来提高性能。

使用requestAnimationFrame来调度动画，确保在每个刷新周期内进行更新。

响应式设计和移动优化：

使用响应式设计，根据不同设备的屏幕大小和分辨率，提供合适的显示效果。

针对移动设备进行优化，如使用适当的图片尺寸、禁用不必要的缩放和滚动等。

前端框架和库的选择：

尽量选择体积较小、性能较好的前端框架和库。

考虑使用虚拟列表或无限滚动等技术来处理大量数据的展示。

性能分析和调优：

使用浏览器开发者工具的性能面板，分析页面加载和渲染过程中的性能瓶颈，并进行相应的优化措施。

进行代码性能测试和监测，使用性能监测工具来持续监测并改进页面性能。

最重要的是，要根据具体的场景和需求来选择适合的优化方法，持续关注和改进页面的性能，以提供更好的用户体验。

构建高性能的电商系统架构

电商系统架构通常是一个复杂而庞大的体系，由多个模块和层级组成。以下是一个常见的电商系统架构示例：

用户界面（User Interface）：提供用户与系统交互的前端界面，包括网站、移动应用等。

负责展示商品信息、购物车、下单流程等。

应用服务层（Application Service Layer）：处理用户请求，提供业务逻辑处理和核心功能。

包括用户认证、商品管理、订单管理、支付接口等服务。

业务逻辑层（Business Logic Layer）：实现核心业务逻辑，处理各种交易场景和商业规则。

包括处理促销活动、库存管理、物流配送等。

数据访问层（Data Access Layer）：负责与数据库进行交互，执行数据读取和写入操作。

包括数据访问对象（DAO）或对象关系映射（ORM）等。

数据库层：存储商品、用户、订单等相关数据的数据库。

常见的数据库类型有关系型数据库（如MySQL、PostgreSQL）和NoSQL数据库（如MongoDB、Redis）。

服务层（Service Layer）：提供公共的服务组件，如身份认证、日志记录、缓存、消息队列等。

用于增强系统的可扩展性、可靠性和性能。

第三方服务集成：集成支付网关、物流供应商等第三方服务，实现支付、物流追踪等功能。

安全与监控：包括用户身份验证、数据加密、防护策略等安全措施。

使用监控工具和日志记录来监测系统的运行状态和性能。

扩展层（Scalability Layer）：负责系统的水平扩展和负载均衡，以支持大规模的用户访问和高并发处理。

以上是一个典型的电商系统架构示例，每个系统都会根据自身需求和规模进行适应和调整。架构的设计应该考虑到系统的可扩展性、性能、安全性和可维护性等方面的要求。

要构建高性能的电商系统架构，可以考虑以下几个关键方面：

水平扩展：设计系统时应采用可水平扩展的架构，允许在需要时添加更多的服务器和资源来应对用户请求的增加。此外，使用负载均衡技术将流量分发到不同的服务器，确保系统的可伸缩性和高可用性。
缓存优化：合理使用缓存机制，减少对数据库等后端资源的频繁访问。可以使用缓存服务器（如Redis）来存储常用的数据，例如商品信息、热门推荐等。此外，使用页面缓存和HTTP缓存技术可以提高页面加载速度和用户体验。
异步处理：将一些耗时的操作转变为异步任务，通过消息队列或任务队列进行处理。例如，订单处理、库存更新等操作可以异步执行，减少用户请求的响应时间。
数据库优化：选择适当的数据库类型和优化策略。根据业务需求，可以使用关系型数据库（如MySQL）或NoSQL数据库（如MongoDB）作为数据存储。使用合适的索引、分区、数据分片等技术来提高数据库的读写性能和扩展性。
CDN加速：使用内容分发网络（CDN）来加速静态资源的传输和分发，减少用户请求的时延。将静态资源（如图片、CSS和JavaScript文件）缓存到离用户更近的CDN节点，提高页面加载速度。
异地多活：在不同地理位置部署多个系统节点，实现异地多活架构，提高系统的容灾能力和可用性。通过数据同步和负载均衡技术，确保用户能够就近访问和使用系统。
监控和调优：建立完善的监控系统，实时监测系统的性能指标、日志和错误信息。根据监控数据进行调优和优化，及时发现和解决潜在的性能瓶颈和故障问题。
安全保护：采取必要的安全措施，保护用户数据和系统的安全。包括使用加密技术保护数据传输过程、进行合法用户认证、预防DDoS攻击等。