😱 应用发生错误

很抱歉，页面出现了意外错误，请尝试刷新或联系管理员。

\n\n {/* 可选：显示错误详情（生产环境可隐藏） */}\n {process.env.NODE_ENV === \"development\" && (\n

错误详情

\n {this.state.error?.message}\n
\n {this.state.errorInfo?.componentStack}\n

\n )}\n\n

\n \n \n

\n );\n }\n\n // 如果没有错误，渲染子组件\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n```\n\n2. **全局应用**\n\n - 在应用入口（App.jsx）用 ErrorBoundary 包裹整个应用，确保所有子组件的错误都能被捕获\n - 错误边界会自动捕获其内部所有组件（包括嵌套组件）的渲染错误、生命周期错误等\n\n```jsx\nimport React from \"react\";\nimport ErrorBoundary from \"./ErrorBoundary\";\nimport Router from \"./Router\"; // 你的路由组件\nimport GlobalStyle from \"./GlobalStyle\"; // 全局样式\n\nfunction App() {\n return (\n // 用错误边界包裹整个应用\n \n \n \n \n );\n}\n\nexport default App;\n```\n\n### 注意事项\n\n- 错误边界**不能捕获以下错误**：\n\n - 事件处理函数中的错误（需手动 try/catch）\n - 异步代码中的错误（如 setTimeout、Promise）\n - 错误边界自身的错误\n - 服务端渲染的错误\n\n- 对于异步错误（如 API 请求失败），需要额外在代码中处理（如 try/catch 或状态管理）\n\n- 可以根据需要扩展错误边界，例如：\n - 增加错误分类显示不同提示\n - 实现自动重试逻辑\n - 集成错误监控工具（如 Sentry）\n\n通过这种方式，你的 React 应用就能拥有一个全局的崩溃处理机制，在发生错误时给用户友好的提示，而不是白屏或控制台报错。\n","reactions",{"_58":179,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1136/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/1136/timeline","performed_via_github_app","state_reason","score",1,{"_58":196,"_60":61,"_62":197,"_64":198,"_66":199,"_68":200,"_70":201,"_72":202,"_74":203,"_76":204,"_78":205,"_111":206,"_131":132,"_133":24,"_134":-5,"_135":208,"_137":209,"_159":152,"_153":222,"_155":222,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":223,"_169":224,"_175":225,"_177":226,"_189":228,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1095","https://api.github.com/repos/pro-collection/interview-question/issues/1095/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1095/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1095/events","https://github.com/pro-collection/interview-question/issues/1095",2842965964,"I_kwDOJGDC6c6pdDfM",1095,"[React] Recoil 里面 selectorFamily 的作用是什么？和 selector 有啥区别【热度: 200】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[207],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":218,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2025-02-10T16:23:47Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：Recoil selector 和 selectorFamily\n\n在 Recoil 中，`selectorFamily` 和 `selector` 都是用于创建派生状态的工具，但它们在使用场景和功能上存在一些差异，下面为你详细介绍它们的作用以及区别。\n\n### `selector` 的作用\n\n`selector` 用于创建派生状态，它可以根据一个或多个原子（`atom`）状态计算出新的状态。`selector` 的值会自动进行记忆化，只有当依赖的状态发生变化时才会重新计算。以下是一个简单的 `selector` 示例：\n\n```jsx\nimport { atom, selector, useRecoilValue } from \"recoil\";\n\n// 定义一个原子状态\nconst textState = atom({\n key: \"textState\",\n default: \"Hello, Recoil!\",\n});\n\n// 定义一个 selector，它依赖于 textState\nconst textLengthState = selector({\n key: \"textLengthState\",\n get: ({ get }) => {\n const text = get(textState);\n return text.length;\n },\n});\n\nconst App = () => {\n const textLength = useRecoilValue(textLengthState);\n return (\n

Text length: {textLength}

\n );\n};\n```\n\n在这个例子中，`textLengthState` 是一个 `selector`，它根据 `textState` 的值计算文本的长度。\n\n### `selectorFamily` 的作用\n\n`selectorFamily` 是 `selector` 的一种扩展，它允许你创建一系列相关的 `selector`，这些 `selector` 可以根据传入的参数动态生成。这在需要根据不同的输入生成不同的派生状态时非常有用，比如根据不同的 ID 获取不同的数据。以下是一个 `selectorFamily` 的示例：\n\n```jsx\nimport { atom, selectorFamily, useRecoilValue } from \"recoil\";\n\n// 模拟一个数据集合\nconst dataState = atom({\n key: \"dataState\",\n default: {\n 1: { name: \"Item 1\" },\n 2: { name: \"Item 2\" },\n 3: { name: \"Item 3\" },\n },\n});\n\n// 定义一个 selectorFamily\nconst itemSelectorFamily = selectorFamily({\n key: \"itemSelectorFamily\",\n get:\n (itemId) =>\n ({ get }) => {\n const data = get(dataState);\n return data[itemId];\n },\n});\n\nconst App = () => {\n const item1 = useRecoilValue(itemSelectorFamily(1));\n const item2 = useRecoilValue(itemSelectorFamily(2));\n\n return (\n

Item 1: {item1?.name}

Item 2: {item2?.name}

\n );\n};\n```\n\n在这个例子中，`itemSelectorFamily` 是一个 `selectorFamily`，它根据传入的 `itemId` 从 `dataState` 中获取相应的数据。通过不同的 `itemId` 可以获取不同的派生状态。\n\n### 两者的区别\n\n- **参数化能力**\n - **`selector`**：没有参数化的能力，它的依赖和计算逻辑是固定的，每次使用时都会计算相同的派生状态。\n - **`selectorFamily`**：支持参数化，可以根据传入的不同参数生成不同的 `selector` 实例，从而计算出不同的派生状态。\n- **使用场景**\n - **`selector`**：适用于派生状态的计算逻辑固定，不依赖外部参数的场景，比如根据一个固定的原子状态计算其长度、总和等。\n - **`selectorFamily`**：适用于需要根据不同的输入动态生成派生状态的场景，比如根据不同的 ID 获取不同的数据、根据不同的筛选条件获取过滤后的数据等。\n- **记忆化机制**\n - **`selector`**：对整个 `selector` 进行记忆化，只要依赖的状态不变，就不会重新计算。\n - **`selectorFamily`**：对每个根据不同参数生成的 `selector` 实例进行记忆化，不同参数对应的实例之间相互独立，每个实例的计算结果会分别进行记忆化。\n\n综上所述，`selectorFamily` 是 `selector` 的增强版本，当你需要根据不同的参数动态生成派生状态时，应该使用 `selectorFamily`；而当派生状态的计算逻辑固定时，使用 `selector` 即可。\n",{"_58":227,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1095/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1095/timeline",{"_58":230,"_60":61,"_62":231,"_64":232,"_66":233,"_68":234,"_70":235,"_72":236,"_74":237,"_76":238,"_78":239,"_111":240,"_131":132,"_133":24,"_134":-5,"_135":242,"_137":243,"_159":152,"_153":245,"_155":246,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":247,"_169":248,"_175":249,"_177":250,"_189":252,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1094","https://api.github.com/repos/pro-collection/interview-question/issues/1094/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1094/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1094/events","https://github.com/pro-collection/interview-question/issues/1094",2842901665,"I_kwDOJGDC6c6pczyh",1094,"[React] Recoil 里面 selector 支持哪些参数【热度: 239】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[241],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":244,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2025-02-10T16:03:44Z","2025-02-10T16:03:45Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：Recoil selector\n\n在 Recoil 中，`selector` 函数接受一个配置对象作为参数，这个配置对象有多个可选属性，下面详细介绍这些属性。\n\n### 1. `key`\n\n- **类型**：`string`\n- **描述**：`key` 是一个必需的属性，用于唯一标识这个 `selector`。在 Recoil 的内部状态管理系统中，每个 `selector` 都需要一个唯一的键，以确保状态的正确更新和管理。\n- **示例**：\n\n```jsx\nconst mySelector = selector({\n key: \"mySelector\",\n get: ({ get }) => {\n // 状态计算逻辑\n },\n});\n```\n\n### 2. `get`\n\n- **类型**：`({ get: GetRecoilValue }) => any`\n- **描述**：`get` 函数是 `selector` 中最重要的部分，用于计算 `selector` 的值。它接收一个对象作为参数，该对象包含一个 `get` 函数，通过这个 `get` 函数可以获取其他 `atom` 或 `selector` 的值。当依赖的状态发生变化时，`get` 函数会重新执行以计算新的值。\n- **示例**：\n\n```jsx\nconst textState = atom({\n key: \"textState\",\n default: \"Hello\",\n});\n\nconst textLengthSelector = selector({\n key: \"textLengthSelector\",\n get: ({ get }) => {\n const text = get(textState);\n return text.length;\n },\n});\n```\n\n### 3. `set`（可选）\n\n- **类型**：`({ set: SetRecoilState, reset: ResetRecoilState }, newValue: any) => void`\n- **描述**：`set` 函数用于使 `selector` 变为可写的。当调用 `useRecoilState` 或类似的钩子来修改这个 `selector` 的值时，`set` 函数会被执行。它接收两个参数：第一个参数是一个包含 `set` 和 `reset` 函数的对象，`set` 函数用于更新其他 `atom` 或 `selector` 的值，`reset` 函数用于将状态重置为默认值；第二个参数是新的值。\n- **示例**：\n\n```jsx\nconst counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\nconst doubleCounterSelector = selector({\n key: \"doubleCounterSelector\",\n get: ({ get }) => {\n const counter = get(counterState);\n return counter * 2;\n },\n set: ({ set }, newValue) => {\n set(counterState, newValue / 2);\n },\n});\n```\n\n### 4. `dangerouslyAllowMutability`（可选）\n\n- **类型**：`boolean`\n- **描述**：Recoil 默认假设状态是不可变的，这有助于性能优化和状态管理。但在某些特殊情况下，你可能需要对状态进行可变的修改，这时可以将 `dangerouslyAllowMutability` 设置为 `true`。不过，使用这个选项需要谨慎，因为它可能会破坏 Recoil 的一些优化机制。\n- **示例**：\n\n```jsx\nconst mutableSelector = selector({\n key: \"mutableSelector\",\n get: () => {\n // 获取状态逻辑\n },\n dangerouslyAllowMutability: true,\n});\n```\n\n### 5. `cachePolicy_UNSTABLE`（可选）\n\n- **类型**：`{ eviction: 'most-recent' | 'lru' | 'none' }`\n- **描述**：这个属性用于控制 `selector` 的缓存策略。`eviction` 有三个可选值：\n - `'most-recent'`：只保留最近使用的值。\n - `'lru'`：使用最近最少使用（LRU）算法进行缓存淘汰。\n - `'none'`：不使用缓存，每次都重新计算。\n- **示例**：\n\n```jsx\nconst cachedSelector = selector({\n key: \"cachedSelector\",\n get: () => {\n // 状态计算逻辑\n },\n cachePolicy_UNSTABLE: {\n eviction: \"lru\",\n },\n});\n```\n\n这些就是 `selector` 支持的主要参数，通过合理使用这些参数，可以实现复杂的状态计算和管理。\n",{"_58":251,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1094/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1094/timeline",{"_58":254,"_60":61,"_62":255,"_64":256,"_66":257,"_68":258,"_70":259,"_72":260,"_74":261,"_76":262,"_78":263,"_111":264,"_131":132,"_133":24,"_134":-5,"_135":266,"_137":267,"_159":152,"_153":269,"_155":270,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":271,"_169":272,"_175":273,"_177":274,"_189":276,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1093","https://api.github.com/repos/pro-collection/interview-question/issues/1093/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1093/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1093/events","https://github.com/pro-collection/interview-question/issues/1093",2842893826,"I_kwDOJGDC6c6pcx4C",1093,"[React] Recoil 里面 selector 该如何使用【热度: 239】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[265],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":268,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2025-02-10T16:01:40Z","2025-02-10T16:01:41Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：Recoil selector\n\n在 Recoil 中，`selector` 用于创建派生状态，它可以根据一个或多个原子（`atom`）状态计算出新的状态。`selector` 的值会自动进行记忆化，只有当依赖的状态发生变化时才会重新计算。下面详细介绍 `selector` 的使用方法。\n\n### 1. 基本使用\n\n创建一个简单的 `atom` 和 `selector`：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilValue } from \"recoil\";\n\n// 定义一个原子状态\nconst textState = atom({\n key: \"textState\",\n default: \"Hello, Recoil!\",\n});\n\n// 定义一个 selector，它依赖于 textState\nconst textLengthState = selector({\n key: \"textLengthState\",\n get: ({ get }) => {\n const text = get(textState);\n return text.length;\n },\n});\n\nconst App = () => {\n // 使用 useRecoilValue 钩子获取 selector 的值\n const textLength = useRecoilValue(textLengthState);\n\n return (\n

Text length: {textLength}

\n );\n};\n\nexport default App;\n```\n\n在上述代码中：\n\n- 首先定义了一个 `atom` `textState`，它代表一个文本状态。\n- 然后定义了一个 `selector` `textLengthState`，在 `get` 函数中，通过 `get` 参数获取 `textState` 的值，并计算其长度。\n- 最后在组件中使用 `useRecoilValue` 钩子获取 `textLengthState` 的值并渲染。\n\n### 2. 多个依赖的 selector\n\n`selector` 可以依赖多个 `atom` 或其他 `selector`：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilValue } from \"recoil\";\n\n// 定义两个原子状态\nconst num1State = atom({\n key: \"num1State\",\n default: 10,\n});\n\nconst num2State = atom({\n key: \"num2State\",\n default: 20,\n});\n\n// 定义一个 selector，依赖于 num1State 和 num2State\nconst sumState = selector({\n key: \"sumState\",\n get: ({ get }) => {\n const num1 = get(num1State);\n const num2 = get(num2State);\n return num1 + num2;\n },\n});\n\nconst App = () => {\n const sum = useRecoilValue(sumState);\n\n return (\n

Sum: {sum}

\n );\n};\n\nexport default App;\n```\n\n在这个例子中，`sumState` 这个 `selector` 依赖于 `num1State` 和 `num2State` 两个 `atom`，它会计算这两个状态的和。\n\n### 3. 可写的 selector\n\n除了只读的 `selector`，还可以创建可写的 `selector`，通过 `set` 函数来修改依赖的状态：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilState } from \"recoil\";\n\n// 定义一个原子状态\nconst counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\n// 定义一个可写的 selector\nconst doubleCounterState = selector({\n key: \"doubleCounterState\",\n get: ({ get }) => {\n const counter = get(counterState);\n return counter * 2;\n },\n set: ({ set }, newValue) => {\n set(counterState, newValue / 2);\n },\n});\n\nconst App = () => {\n const [doubleCounter, setDoubleCounter] = useRecoilState(doubleCounterState);\n\n return (\n

Double Counter: {doubleCounter}

\n \n

\n );\n};\n\nexport default App;\n```\n\n在这个例子中，`doubleCounterState` 是一个可写的 `selector`：\n\n- `get` 函数根据 `counterState` 计算出双倍的值。\n- `set` 函数接收一个新值，并将其除以 2 后更新 `counterState`。\n\n### 4. 使用多个 `selector` 组合状态\n\n可以将多个 `selector` 组合起来创建更复杂的派生状态：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilValue } from \"recoil\";\n\n// 定义原子状态\nconst priceState = atom({\n key: \"priceState\",\n default: 100,\n});\n\nconst discountRateState = atom({\n key: \"discountRateState\",\n default: 0.1,\n});\n\n// 定义第一个 selector，计算折扣金额\nconst discountAmountState = selector({\n key: \"discountAmountState\",\n get: ({ get }) => {\n const price = get(priceState);\n const discountRate = get(discountRateState);\n return price * discountRate;\n },\n});\n\n// 定义第二个 selector，计算最终价格\nconst finalPriceState = selector({\n key: \"finalPriceState\",\n get: ({ get }) => {\n const price = get(priceState);\n const discountAmount = get(discountAmountState);\n return price - discountAmount;\n },\n});\n\nconst App = () => {\n const finalPrice = useRecoilValue(finalPriceState);\n\n return (\n

Final Price: {finalPrice}

\n );\n};\n\nexport default App;\n```\n\n在这个例子中，`discountAmountState` 计算折扣金额，`finalPriceState` 依赖于 `priceState` 和 `discountAmountState` 计算最终价格。\n",{"_58":275,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1093/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1093/timeline",{"_58":278,"_60":61,"_62":279,"_64":280,"_66":281,"_68":282,"_70":283,"_72":284,"_74":285,"_76":286,"_78":287,"_111":288,"_131":132,"_133":24,"_134":-5,"_135":290,"_137":291,"_159":152,"_153":293,"_155":293,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":294,"_169":295,"_175":296,"_177":297,"_189":299,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1092","https://api.github.com/repos/pro-collection/interview-question/issues/1092/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1092/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1092/events","https://github.com/pro-collection/interview-question/issues/1092",2842843657,"I_kwDOJGDC6c6pcloJ",1092,"[React] 状态管理库 Recoil 与 Redux 有何区别【热度: 210】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[289],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":292,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2025-02-10T15:44:47Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：Recoil 与 Redux 区别\n\nRecoil 和 Redux 都是用于管理 React 应用程序状态的库，但它们在设计理念、API、使用场景等方面存在一些明显的区别，下面为你详细介绍：\n\n### 1. 设计理念\n\n- **Redux**\n - 采用单向数据流和单一数据源的设计理念。整个应用的状态被存储在一个单一的 store 中，并且这个状态是只读的。唯一改变状态的方式是触发 action，reducer 会根据 action 来纯函数式地计算新的状态。这种设计使得应用的状态变化可预测，便于调试和维护。\n- **Recoil**\n - 更强调原子性和灵活性。它将状态拆分成多个原子（atoms），每个原子代表一个独立的状态单元。组件可以独立地订阅和修改这些原子状态，并且可以通过选择器（selectors）来派生和组合状态。这种设计使得状态管理更加细粒度，易于扩展和复用。\n\n### 2. API 风格\n\n- **Redux**\n - API 相对复杂，需要定义 action、reducer、store 等多个概念。通常的使用流程是：定义 action 类型和 action 创建函数，编写 reducer 函数来处理不同的 action，然后使用`createStore`函数创建 store。组件需要通过`connect`高阶组件或者`useSelector`、`useDispatch`等钩子来连接到 store 并获取状态和分发 action。\n\n```jsx\n// 定义 action 类型\nconst INCREMENT = \"INCREMENT\";\n\n// 定义 action 创建函数\nconst increment = () => ({ type: INCREMENT });\n\n// 定义 reducer\nconst counterReducer = (state = 0, action) => {\n switch (action.type) {\n case INCREMENT:\n return state + 1;\n default:\n return state;\n }\n};\n\n// 创建 store\nimport { createStore } from \"redux\";\nconst store = createStore(counterReducer);\n\n// 在组件中使用\nimport { useSelector, useDispatch } from \"react-redux\";\nconst Counter = () => {\n const count = useSelector((state) => state);\n const dispatch = useDispatch();\n return (\n

Count: {count}

\n \n

\n );\n};\n```\n\n- **Recoil**\n - API 更加简洁和直观。主要使用`atom`来定义状态原子，使用`selector`来定义派生状态。组件可以直接使用`useRecoilState`、`useRecoilValue`等钩子来访问和修改状态。\n\n```jsx\nimport { atom, useRecoilState } from \"recoil\";\n\n// 定义原子状态\nconst counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\n// 在组件中使用\nconst Counter = () => {\n const [count, setCount] = useRecoilState(counterState);\n return (\n

Count: {count}

\n \n

\n );\n};\n```\n\n### 3. 状态管理粒度\n\n- **Redux**\n - 倾向于将整个应用的状态集中管理在一个 store 中，状态的更新是通过全局的 action 和 reducer 来处理的。这在大型应用中可能会导致 reducer 变得复杂，难以维护。\n- **Recoil**\n - 支持细粒度的状态管理，每个原子状态都是独立的，可以被不同的组件独立订阅和修改。这种方式使得状态的管理更加灵活，易于扩展和复用。\n\n### 4. 性能优化\n\n- **Redux**\n - 性能优化通常需要手动进行，例如使用`reselect`库来创建记忆化的选择器，避免不必要的重新计算。\n- **Recoil**\n - 内置了一些性能优化机制，例如自动记忆化选择器，只有当依赖的状态发生变化时才会重新计算选择器的值。\n\n### 5. 学习成本\n\n- **Redux**\n - 由于其概念较多，如 action、reducer、store 等，学习成本相对较高，尤其是对于初学者来说。\n- **Recoil**\n - 设计简单直观，API 易于理解和使用，学习成本较低。\n\n### 6. 使用场景\n\n- **Redux**\n - 适用于大型、复杂的应用，尤其是需要严格控制状态变化和进行时间旅行调试的场景。例如，企业级应用、电商应用等。\n- **Recoil**\n - 适用于中小型应用，或者需要快速迭代和灵活状态管理的场景。例如，原型开发、小型工具应用等。\n",{"_58":298,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1092/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1092/timeline",{"_58":301,"_60":61,"_62":302,"_64":303,"_66":304,"_68":305,"_70":306,"_72":307,"_74":308,"_76":309,"_78":310,"_111":311,"_131":132,"_133":24,"_134":-5,"_135":313,"_137":314,"_159":152,"_153":325,"_155":326,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":327,"_169":328,"_175":329,"_177":330,"_189":332,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1069","https://api.github.com/repos/pro-collection/interview-question/issues/1069/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1069/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1069/events","https://github.com/pro-collection/interview-question/issues/1069",2683350960,"I_kwDOJGDC6c6f8K-w",1069,"[React] useCallback 是否支持异步函数【热度: 410】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[312],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":315,"_68":316,"_62":317,"_70":318,"_72":319,"_74":194,"_76":320,"_122":321,"_147":322,"_149":323,"_151":152,"_131":132,"_153":324,"_155":325,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2024-11-22T14:22:56Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"1. **`useCallback`的基本原理和同步特性**\n\n - `useCallback`是一个 React Hook，主要用于优化组件的性能。它返回一个记忆化的回调函数，这个函数只有在依赖项数组中的元素发生变化时才会重新创建。\n - 例如，在一个典型的同步场景下：\n\n ```javascript\n const memoizedCallback = useCallback(() => {\n doSomething(a, b);\n }, [a, b]);\n ```\n\n 这里的`doSomething`是一个同步函数，`useCallback`会根据`a`和`b`的值是否改变来决定是否重新创建`memoizedCallback`。其目的是避免在组件重新渲染时不必要地重新创建相同的回调函数，从而减少潜在的性能开销，比如避免子组件因为接收的回调函数引用变化而重新渲染。\n\n2. **结合异步函数的方式**\n\n - **在回调函数内部调用异步函数**：`useCallback`本身可以包裹一个包含异步操作的回调函数。例如，可以在`useCallback`返回的函数内部调用`async/await`函数：\n\n ```javascript\n const memoizedAsyncCallback = useCallback(async () => {\n await someAsyncFunction();\n // 其他操作\n }, []);\n ```\n\n 这样，`memoizedAsyncCallback`是一个异步的记忆化回调函数，只有在依赖项数组（这里为空）中的元素发生变化时才会重新创建。当这个回调函数被调用时，它会执行异步操作。\n\n - **传递给子组件并在子组件中触发异步操作**：可以将这个包含异步操作的记忆化回调函数传递给子组件，让子组件在合适的时机（比如用户交互或者组件生命周期的某个阶段）触发异步操作。例如：\n\n ```javascript\n function ParentComponent() {\n const memoizedAsyncCallback = useCallback(async () => {\n await someAsyncFunction();\n // 其他操作\n }, []);\n return ;\n }\n function ChildComponent({ onAsyncAction }) {\n const handleClick = () => {\n onAsyncAction();\n };\n return ;\n }\n ```\n\n3. **注意事项**\n - 当使用`useCallback`包裹异步回调函数时，要注意依赖项数组的设置。如果异步函数内部引用了外部变量，这些变量应该被正确地包含在依赖项数组中，否则可能会导致闭包问题或者使用过期的变量值。\n - 虽然`useCallback`可以处理包含异步操作的回调函数，但它并不能改变异步函数本身的执行性质。也就是说，异步函数仍然是异步执行的，`useCallback`只是控制了回调函数的创建频率。在处理异步操作的结果（如更新状态）时，需要遵循 React 的异步状态更新原则，比如在`useEffect`或者`useState`的更新函数中正确地处理异步返回的数据。\n",{"_58":331,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1069/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1069/timeline",{"_58":334,"_60":61,"_62":335,"_64":336,"_66":337,"_68":338,"_70":339,"_72":340,"_74":341,"_76":342,"_78":343,"_111":344,"_131":132,"_133":24,"_134":-5,"_135":346,"_137":347,"_159":194,"_153":349,"_155":350,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":351,"_169":352,"_175":353,"_177":354,"_189":356,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1068","https://api.github.com/repos/pro-collection/interview-question/issues/1068/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1068/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1068/events","https://github.com/pro-collection/interview-question/issues/1068",2683342681,"I_kwDOJGDC6c6f8I9Z",1068,"[React] useMemo 是否可以支持异步函数【热度: 410】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[345],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":315,"_68":316,"_62":317,"_70":318,"_72":319,"_74":194,"_76":320,"_122":321,"_147":348,"_149":323,"_151":152,"_131":132,"_153":324,"_155":325,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-22T14:18:58Z","2024-12-23T09:19:28Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"`useMemo`本身不直接支持异步函数，但可以通过一些方式来结合异步操作使用。\r\n\r\n1. **`useMemo`的基本原理和同步操作特性**\r\n\r\n - `useMemo`是一个 React Hook，用于优化组件的性能。它会在组件渲染时，根据依赖项数组中的值是否发生变化来决定是否重新计算记忆化的值。\r\n - 例如，在一个简单的同步场景中：\r\n\r\n ```javascript\r\n const memoizedValue = useMemo(() => {\r\n return expensiveComputation(a, b);\r\n }, [a, b]);\r\n ```\r\n\r\n 这里，`expensiveComputation`是一个同步函数，`useMemo`会在`a`和`b`的值没有改变的情况下，复用之前计算得到的`memoizedValue`，避免不必要的重复计算，从而提高性能。\r\n\r\n2. **结合异步函数的方式**\r\n\r\n - **使用`Promise`和`async/await`在`useEffect`中触发异步操作并更新状态**：\r\n - 可以先在`useEffect`中触发异步操作，当异步操作完成后，通过`setState`更新组件状态，进而触发重新渲染。然后在需要使用异步计算结果的地方，可以使用`useMemo`来记忆化这个状态。\r\n - 例如：\r\n ```javascript\r\n const [asyncResult, setAsyncResult] = useState(null);\r\n useEffect(() => {\r\n const fetchData = async () => {\r\n const result = await someAsyncFunction();\r\n setAsyncResult(result);\r\n };\r\n fetchData();\r\n }, []);\r\n const memoizedAsyncResult = useMemo(() => asyncResult, [asyncResult]);\r\n ```\r\n - **自定义`useAsyncMemo`钩子（高级用法）**：\r\n - 如果需要在多个地方重复使用这种异步记忆化的逻辑，可以创建一个自定义的`useAsyncMemo`钩子。这个钩子内部可以管理异步操作的状态（如加载中、错误、成功结果），并返回记忆化后的异步结果。\r\n - 示例代码如下：\r\n ```javascript\r\n function useAsyncMemo(asyncFunction, dependencies) {\r\n const [result, setResult] = useState(null);\r\n const [loading, setLoading] = useState(false);\r\n const [error, setError] = useState(null);\r\n useEffect(() => {\r\n const fetchData = async () => {\r\n setLoading(true);\r\n try {\r\n const res = await asyncFunction();\r\n setResult(res);\r\n } catch (err) {\r\n setError(err);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n fetchData();\r\n }, dependencies);\r\n return [result, loading, error];\r\n }\r\n ```\r\n 这样，在组件中就可以使用`const [memoizedAsyncResult, loading, error]=useAsyncMemo(someAsyncFunction, [dependency1, dependency2]);`来获取异步记忆化的结果以及加载状态和错误信息。\r\n\r\n3. **注意事项**\r\n - 避免在`useMemo`内部直接使用异步函数进行计算，因为`useMemo`是同步执行的，它期望返回一个立即可用的值。如果在`useMemo`内部返回一个`Promise`，它会被当作普通对象处理，而不是等待异步操作完成后返回正确的值。\r\n - 当结合`useEffect`和`useMemo`来处理异步操作时，要注意`useEffect`的依赖项数组的设置，避免无限循环和不必要的重新渲染。同时，对于`useAsyncMemo`这样的自定义钩子，也要仔细考虑其内部状态管理和依赖项的处理，以确保正确的功能和性能。\r\n",{"_58":355,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1068/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1068/timeline",{"_58":358,"_60":61,"_62":359,"_64":360,"_66":361,"_68":362,"_70":363,"_72":364,"_74":365,"_76":366,"_78":367,"_111":368,"_131":132,"_133":24,"_134":-5,"_135":370,"_137":371,"_159":194,"_153":373,"_155":374,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":375,"_169":376,"_175":377,"_177":378,"_189":380,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1052","https://api.github.com/repos/pro-collection/interview-question/issues/1052/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1052/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1052/events","https://github.com/pro-collection/interview-question/issues/1052",2638501705,"I_kwDOJGDC6c6dRFdJ",1052,"[React] 如何将一个层级非常深的子组件的某一个方法，抛出给上层组件使用【热度: 465】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[369],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":372,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-11-06T15:51:21Z","2025-02-25T08:49:06Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：调用子组件方法\n\n在 React 中，可以通过以下几种方式将一个层级非常深的子组件的某一个方法抛出给上层组件使用：\n\n**一、使用回调函数传递**\n\n1. 在父组件中定义一个回调函数，并将其作为属性传递给子组件的父级组件，依次向下传递，直到目标子组件。\n\n 例如：\n\n ```jsx\n function ParentComponent() {\n const handleDeepMethod = () => {\n console.log(\"调用了深层子组件的方法\");\n };\n return ;\n }\n\n function ChildComponent({ onDeepMethod }) {\n return ;\n }\n\n function GrandChildComponent({ onDeepMethod }) {\n const deepMethod = () => {\n console.log(\"深层子组件的方法被执行\");\n onDeepMethod();\n };\n return ;\n }\n ```\n\n2. 在深层子组件中，当特定条件触发时，调用这个通过层层传递下来的回调函数，从而让父组件执行相应的操作。\n\n**二、使用 React 的 Context API**\n\n1. 创建一个 Context：\n\n ```jsx\n const DeepMethodContext = React.createContext();\n ```\n\n2. 在父组件中提供值：\n\n ```jsx\n function ParentComponent() {\n const handleDeepMethod = () => {\n console.log(\"调用了深层子组件的方法\");\n };\n return (\n \n \n \n );\n }\n ```\n\n3. 在深层子组件中获取 Context 值并调用：\n\n ```jsx\n function GrandChildComponent() {\n const handleDeepMethod = React.useContext(DeepMethodContext);\n const deepMethod = () => {\n console.log(\"深层子组件的方法被执行\");\n handleDeepMethod();\n };\n return ;\n }\n ```\n\n**三、使用 Custom Events**\n还有一种方法是使用自定义事件（Custom Events）。\n\n1. 在深层子组件中创建并派发自定义事件：\n\n ```jsx\n function GrandChildComponent() {\n const deepMethod = () => {\n console.log(\"深层子组件的方法被执行\");\n const event = new CustomEvent(\"deepMethodTriggered\", { detail: {} });\n window.dispatchEvent(event);\n };\n return ;\n }\n ```\n\n2. 在父组件中监听这个自定义事件：\n\n ```jsx\n function ParentComponent() {\n const handleDeepMethod = () => {\n console.log(\"调用了深层子组件的方法\");\n };\n useEffect(() => {\n window.addEventListener(\"deepMethodTriggered\", handleDeepMethod);\n return () => {\n window.removeEventListener(\"deepMethodTriggered\", handleDeepMethod);\n };\n }, []);\n return ;\n }\n ```\n",{"_58":379,"_180":194,"_181":194,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1052/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1052/timeline",{"_58":382,"_60":61,"_62":383,"_64":384,"_66":385,"_68":386,"_70":387,"_72":388,"_74":389,"_76":390,"_78":391,"_111":392,"_131":132,"_133":24,"_134":-5,"_135":394,"_137":395,"_159":152,"_153":397,"_155":397,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":398,"_169":399,"_175":400,"_177":401,"_189":403,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1001","https://api.github.com/repos/pro-collection/interview-question/issues/1001/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1001/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1001/events","https://github.com/pro-collection/interview-question/issues/1001",2597580319,"I_kwDOJGDC6c6a0-4f",1001,"[Vue] vue3 对虚拟 dom 做了哪些优化【热度: 446】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[393],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":396,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T13:51:37Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 虚拟dom\n\nVue 3 对虚拟 DOM 进行了多方面的优化，主要包括以下几点：\n\n**一、静态提升（Static Hoisting）**\n\n1. 原理与作用：\n\n - 在 Vue 3 的编译阶段，会分析模板中的静态内容，将静态的节点提升到渲染函数之外。这意味着对于静态的元素和文本，不会在每次渲染时都重新创建虚拟 DOM 节点，而是在组件首次渲染时创建一次，然后在后续的渲染中直接复用。\n - 例如，如果一个组件的模板中有一个静态的标题文本，在 Vue 2 中，每次渲染都会为这个文本创建一个新的虚拟 DOM 节点。而在 Vue 3 中，这个静态文本会被提升，只在组件首次渲染时创建虚拟 DOM 节点，后续渲染直接使用已创建的节点。\n\n2. 性能提升：\n - 减少了虚拟 DOM 的创建和比较开销，特别是在组件频繁渲染时，效果尤为明显。因为静态内容通常不会改变，避免了不必要的重复操作，提高了渲染性能。\n\n**二、补丁算法优化**\n\n1. 更高效的比较策略：\n\n - Vue 3 改进了虚拟 DOM 的补丁算法，能够更快速地找到新旧虚拟 DOM 树之间的差异。新的算法在比较节点时更加智能，能够准确判断节点的类型和属性变化，只对真正发生变化的节点进行更新操作。\n - 例如，当一个列表中的某个元素的文本内容发生变化时，Vue 3 能够快速定位到这个变化的节点，而不会像 Vue 2 那样对整个列表进行逐一比较。\n\n2. 减少不必要的操作：\n - 通过更精确的比较，Vue 3 避免了一些不必要的 DOM 操作。例如，如果一个元素的样式属性没有发生变化，Vue 3 不会触发样式的重新设置，从而减少了对浏览器渲染引擎的压力。\n\n**三、事件处理优化**\n\n1. 静态事件提升：\n\n - 对于静态的事件监听器，Vue 3 也会在编译阶段进行提升。如果一个组件的模板中有一个静态的点击事件监听器，在 Vue 3 中，这个事件监听器会被提取出来，在组件首次渲染时进行绑定，后续渲染中不再重复绑定。\n - 例如，一个按钮的点击事件在组件的整个生命周期中都不会改变，那么在 Vue 3 中，这个事件监听器只会在首次渲染时绑定一次，提高了性能。\n\n2. 事件缓存：\n - Vue 3 还对事件进行了缓存处理。当一个组件被销毁时，它的事件监听器不会立即被移除，而是被缓存起来。如果这个组件在后续的渲染中再次出现，Vue 3 可以直接复用缓存的事件监听器，而不需要重新绑定，进一步提高了性能。\n\n**四、编译器优化**\n\n1. 更好的代码生成：\n\n - Vue 3 的编译器能够生成更高效的渲染函数代码。通过对模板的分析和优化，编译器可以生成更加简洁、高效的虚拟 DOM 创建和更新代码。\n - 例如，编译器可以根据模板中的条件判断和循环结构，生成更加优化的虚拟 DOM 操作代码，减少不必要的计算和操作。\n\n2. 类型推断：\n - Vue 3 的编译器支持类型推断，这使得在开发过程中可以获得更好的类型提示和错误检查。同时，类型推断也可以帮助编译器生成更加高效的代码，因为编译器可以根据类型信息进行一些优化操作。\n - 例如，如果一个组件的 props 定义了明确的类型，编译器可以在生成虚拟 DOM 代码时，针对这些类型进行优化，提高代码的执行效率。\n",{"_58":402,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1001/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1001/timeline",{"_58":405,"_60":61,"_62":406,"_64":407,"_66":408,"_68":409,"_70":410,"_72":411,"_74":412,"_76":413,"_78":414,"_111":415,"_131":132,"_133":24,"_134":-5,"_135":417,"_137":418,"_159":152,"_153":420,"_155":421,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":422,"_169":423,"_175":424,"_177":425,"_189":427,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/1000","https://api.github.com/repos/pro-collection/interview-question/issues/1000/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1000/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1000/events","https://github.com/pro-collection/interview-question/issues/1000",2597578577,"I_kwDOJGDC6c6a0-dR",1000,"[Vue] vue3 还是使用的虚拟 dom 吗？【热度: 345】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[416],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":419,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T13:50:53Z","2024-10-18T13:50:54Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 虚拟dom\n\nVue 3 仍然使用虚拟 DOM（Virtual DOM）。\n\n**一、虚拟 DOM 在 Vue 3 中的重要性**\n\n1. 高效的 DOM 操作：虚拟 DOM 是一种在内存中表示真实 DOM 结构的树形数据结构。在 Vue 3 中，当数据发生变化时，首先会在虚拟 DOM 上进行比较和计算，确定最小化的 DOM 操作集合，然后再将这些操作应用到真实 DOM 上。这样可以避免直接频繁地操作真实 DOM，从而提高性能。\n\n - 例如，当一个组件中的数据发生变化时，Vue 3 会先更新虚拟 DOM 树，然后通过对比新旧虚拟 DOM 树的差异，找出需要更新的真实 DOM 节点，最后只对这些节点进行实际的 DOM 操作。\n\n2. 跨平台开发支持：虚拟 DOM 使得 Vue 3 不仅可以在浏览器中运行，还可以通过一些工具和技术进行跨平台开发。例如，使用 Vue Native 可以将 Vue 3 应用编译为原生移动应用，在移动平台上运行。这是因为虚拟 DOM 可以在不同的平台上进行渲染，而不需要依赖特定平台的 DOM 操作。\n - 比如，在开发一个同时支持 Web 和移动平台的应用时，可以使用 Vue 3 的虚拟 DOM 来实现一套代码在多个平台上的运行，提高开发效率和代码复用性。\n\n**二、Vue 3 对虚拟 DOM 的优化**\n\n1. 静态提升（Static Hoisting）：Vue 3 在编译阶段会分析组件的模板，将静态的节点提升到渲染函数之外。这样在每次渲染时，不需要为静态节点创建新的虚拟 DOM 节点，从而减少了虚拟 DOM 的创建和比较开销。\n\n - 例如，如果一个组件的模板中有一些静态的文本节点或元素，Vue 3 会在编译时将这些静态节点提取出来，在渲染时直接复用，而不是每次都重新创建虚拟 DOM 节点。\n\n2. 补丁算法优化：Vue 3 对虚拟 DOM 的补丁算法进行了优化，使得在更新 DOM 时更加高效。新的补丁算法可以更快地找到需要更新的节点，减少不必要的比较和操作。\n\n - 比如，在对比新旧虚拟 DOM 树时，Vue 3 可以更准确地判断节点的类型和属性变化，只对真正发生变化的节点进行更新，提高了渲染性能。\n\n3. 事件处理优化：在 Vue 3 中，事件处理也进行了优化。对于静态的事件监听器，同样会在编译阶段进行提升，减少了每次渲染时的创建和绑定开销。\n - 例如，如果一个组件中有一个静态的点击事件监听器，Vue 3 会在编译时将这个事件监听器提取出来，在渲染时直接复用，而不是每次都重新绑定。\n",{"_58":426,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/1000/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1000/timeline",{"_58":429,"_60":61,"_62":430,"_64":431,"_66":432,"_68":433,"_70":434,"_72":435,"_74":436,"_76":437,"_78":438,"_111":439,"_131":132,"_133":24,"_134":-5,"_135":441,"_137":442,"_159":152,"_153":444,"_155":445,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":446,"_169":447,"_175":448,"_177":449,"_189":451,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/999","https://api.github.com/repos/pro-collection/interview-question/issues/999/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/999/comments","https://api.github.com/repos/pro-collection/interview-question/issues/999/events","https://github.com/pro-collection/interview-question/issues/999",2597571474,"I_kwDOJGDC6c6a08uS",999,"现代框架如 React、Vue 相比原生开发有什么优势【热度: 897】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[440],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":443,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T13:48:07Z","2024-10-18T13:48:08Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：现代框架优势\n\n现代框架如 React 和 Vue 相比原生开发具有以下优势：\n\n**一、提高开发效率**\n\n1. 组件化开发：\n\n - React 和 Vue 都采用了组件化的开发模式。这使得开发者可以将用户界面拆分成独立的、可复用的组件。每个组件都有自己的逻辑和样式，易于维护和扩展。\n - 例如，在一个电商网站中，可以将商品列表、商品详情、购物车等部分分别构建为不同的组件。当需要修改某个部分的功能或样式时，只需要修改对应的组件，而不会影响其他部分。\n - 组件化开发提高了代码的可维护性和可复用性，减少了重复开发的工作量，从而提高了开发效率。\n\n2. 虚拟 DOM：\n - 这两个框架都使用了虚拟 DOM（Virtual DOM）技术。虚拟 DOM 是一种在内存中构建的树形结构，它与真实的 DOM 结构相对应。当数据发生变化时，框架会先比较虚拟 DOM 的新旧状态，计算出最小的 DOM 操作集合，然后再将这些操作应用到真实的 DOM 上。\n - 这种方式避免了直接操作真实 DOM 带来的性能开销，提高了页面的渲染性能。同时，由于只需要更新变化的部分，而不是整个页面，也减少了不必要的重绘和回流，进一步提高了性能。\n - 例如，在一个列表展示页面中，如果只有一个列表项的数据发生了变化，虚拟 DOM 会只更新这个列表项对应的 DOM 节点，而不是整个列表。\n\n**二、更好的用户体验**\n\n1. 响应式数据绑定：\n\n - React 和 Vue 都提供了响应式的数据绑定机制。当数据发生变化时，框架会自动更新与之相关的 UI 部分，无需手动操作 DOM。\n - 这使得开发者可以专注于业务逻辑的实现，而不必担心数据和 UI 的同步问题。同时，也提高了用户体验，因为用户可以立即看到数据变化后的效果。\n - 例如，在一个表单输入页面中，当用户输入数据时，页面上的实时预览会自动更新，而不需要用户手动触发更新操作。\n\n2. 高效的状态管理：\n - 对于复杂的应用，状态管理是一个重要的问题。React 有 Redux、MobX 等状态管理库，Vue 有 Vuex。这些状态管理工具可以帮助开发者更好地管理应用的状态，实现数据的共享和同步。\n - 状态管理使得不同组件之间可以方便地共享数据，避免了数据传递的复杂性。同时，也可以更好地处理异步操作和数据的持久化，提高了应用的可靠性和稳定性。\n - 例如，在一个多页面应用中，用户的登录状态需要在多个页面中共享。使用状态管理工具，可以将登录状态存储在一个全局的状态容器中，各个页面可以方便地获取和更新这个状态。\n\n**三、跨平台开发**\n\n1. 基于 Web 技术：\n\n - React 和 Vue 都是基于 Web 技术开发的框架，这意味着它们可以在任何支持 Web 浏览器的平台上运行。无论是桌面浏览器、移动浏览器还是其他设备上的浏览器，都可以运行使用这些框架开发的应用。\n - 这使得开发者可以使用一套代码库开发多个平台的应用，减少了开发成本和维护成本。同时，也提高了应用的可移植性和兼容性。\n - 例如，使用 React Native 或 Vue Native，可以将基于 React 或 Vue 的 Web 应用转换为原生移动应用，实现跨平台开发。\n\n2. 服务器端渲染（SSR）：\n - React 和 Vue 都支持服务器端渲染。服务器端渲染可以提高应用的首屏加载速度，改善 SEO（搜索引擎优化），并提供更好的用户体验。\n - 在服务器端渲染中，框架会在服务器上生成 HTML 页面，并将其发送给客户端。客户端接收到 HTML 页面后，可以立即显示内容，而不需要等待 JavaScript 代码的下载和执行。\n - 例如，对于一个新闻网站，服务器端渲染可以确保搜索引擎能够抓取到完整的页面内容，提高网站的搜索排名。同时，用户也可以更快地看到页面内容，提高用户体验。\n",{"_58":450,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/999/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/999/timeline",{"_58":453,"_60":61,"_62":454,"_64":455,"_66":456,"_68":457,"_70":458,"_72":459,"_74":460,"_76":461,"_78":462,"_111":463,"_131":132,"_133":24,"_134":-5,"_135":470,"_137":471,"_159":152,"_153":473,"_155":474,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":475,"_169":476,"_175":477,"_177":478,"_189":480,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/998","https://api.github.com/repos/pro-collection/interview-question/issues/998/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/998/comments","https://api.github.com/repos/pro-collection/interview-question/issues/998/events","https://github.com/pro-collection/interview-question/issues/998",2597563996,"I_kwDOJGDC6c6a065c",998,"[Vue] nextTick 作用是什么，原理是什么【热度: 177】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[464,465],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":466,"_72":467,"_58":468,"_117":469,"_119":129,"_121":24,"_122":130},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":472,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T13:45:09Z","2024-10-18T13:45:10Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue nextTick 作用、原理\n\n在 Vue 中，`nextTick`主要有以下作用和工作原理：\n\n**一、作用**\n\n1. 确保 DOM 更新后执行操作：\n\n - Vue 是异步更新 DOM 的。当你在代码中修改了数据，Vue 不会立即更新 DOM，而是将这些更新操作放入一个队列中，等待下一个“tick”（事件循环的一个周期）再统一进行 DOM 更新。\n - 如果在数据变化后，你需要立即操作更新后的 DOM，就可以使用`nextTick`。它会在 DOM 更新完成后执行回调函数，确保你能获取到最新的 DOM 状态。\n - 例如，你在修改了一个数据后，想要获取某个元素的新尺寸或位置，就可以在`nextTick`的回调函数中进行操作。\n\n2. 处理异步操作后的 DOM 操作：\n - 在一些异步操作（如定时器、Ajax 请求等）之后，如果需要操作 DOM，也可以使用`nextTick`来确保 DOM 已经更新。\n - 比如，在一个 Ajax 请求成功后，你想要根据返回的数据更新 DOM，这时可以在请求成功的回调函数中使用`nextTick`来确保 DOM 更新已经完成。\n\n**二、原理**\n\n1. 利用事件循环：\n\n - Vue 的`nextTick`实现利用了 JavaScript 的事件循环机制。在浏览器环境中，JavaScript 是单线程执行的，事件循环负责管理异步任务的执行顺序。\n - Vue 将`nextTick`的回调函数放入微任务队列（在 Promise.then、MutationObserver 和 process.nextTick 中执行）或宏任务队列（在 setTimeout、setInterval 和 setImmediate 中执行），具体取决于浏览器的支持情况。\n - 当当前执行栈为空时，事件循环会从任务队列中取出任务执行。如果微任务队列中有任务，会先执行微任务队列中的任务，然后再执行宏任务队列中的任务。这样可以确保`nextTick`的回调函数在 DOM 更新之后执行。\n\n2. 内部实现：\n - Vue 内部维护了一个异步任务队列，用于存储`nextTick`的回调函数。当调用`nextTick`时，回调函数会被添加到这个队列中。\n - Vue 在更新 DOM 后，会检查这个异步任务队列是否为空。如果不为空，会取出队列中的第一个任务并执行它。\n - 这样就保证了在 DOM 更新完成后，`nextTick`的回调函数能够按照调用的顺序依次执行。\n\n例如：\n\n```html\n\n\n \n \n \n\n \n

\n \n

\n\n \n \n\n```\n\n在这个例子中，点击按钮后，数据被更新，但立即获取`

`元素的文本内容时，还是旧的值。而在`nextTick`的回调函数中获取`

`元素的文本内容时，就已经是更新后的新值了。\n\n综上所述，`nextTick`在 Vue 中是一个非常有用的工具，用于确保在 DOM 更新后执行特定的操作，其原理是利用 JavaScript 的事件循环机制来实现异步任务的调度。\n",{"_58":479,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/998/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/998/timeline",{"_58":482,"_60":61,"_62":483,"_64":484,"_66":485,"_68":486,"_70":487,"_72":488,"_74":489,"_76":490,"_78":491,"_111":492,"_131":132,"_133":24,"_134":-5,"_135":495,"_137":496,"_159":152,"_153":498,"_155":498,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":499,"_169":500,"_175":501,"_177":502,"_189":504,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/997","https://api.github.com/repos/pro-collection/interview-question/issues/997/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/997/comments","https://api.github.com/repos/pro-collection/interview-question/issues/997/events","https://github.com/pro-collection/interview-question/issues/997",2597556729,"I_kwDOJGDC6c6a05H5",997,"[Vue] vue3 如何监听数组变化【热度: 199】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[493,494],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":466,"_72":467,"_58":468,"_117":469,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":497,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-18T13:42:03Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 监听数组变化\n\n在 Vue 3 中，可以通过以下几种方式监听数组的变化：\n\n**一、使用`watch`函数监听数组引用变化**\n\n1. 直接监听数组变量：\n\n - 可以使用`watch`函数来监听一个数组变量的变化。当数组被重新赋值时，`watch`会触发。\n\n ```javascript\n import { reactive, watch } from \"vue\";\n\n const state = reactive({\n arr: [1, 2, 3],\n });\n\n watch(\n () => state.arr,\n (newValue, oldValue) => {\n console.log(\"数组变化了\", newValue, oldValue);\n }\n );\n ```\n\n - 在这个例子中，当`state.arr`数组被重新赋值时，`watch`函数中的回调函数会被执行，打印出新旧值。\n\n2. 监听特定属性的数组：\n\n - 如果你只想监听数组中的特定属性，可以使用`watch`函数结合函数返回值来实现。\n\n ```javascript\n import { reactive, watch } from \"vue\";\n\n const state = reactive({\n arr: [1, 2, 3],\n otherProperty: \"some value\",\n });\n\n watch(\n () => state.arr.length,\n (newValue, oldValue) => {\n console.log(\"数组长度变化了\", newValue, oldValue);\n }\n );\n ```\n\n - 这里监听了数组的长度属性，当数组的长度发生变化时，回调函数会被执行。\n\n**二、使用`watchEffect`函数自动追踪数组变化**\n\n`watchEffect`函数会立即执行传入的函数，并在其依赖的响应式数据发生变化时重新执行。\n\n```javascript\nimport { reactive, watchEffect } from \"vue\";\n\nconst state = reactive({\n arr: [1, 2, 3],\n});\n\nwatchEffect(() => {\n console.log(\"数组变化了\", state.arr);\n});\n```\n\n在这个例子中，每当`state.arr`数组发生变化时，`watchEffect`中的函数会自动重新执行，打印出数组的当前值。\n\n**三、使用`computed`计算属性间接监听数组变化**\n\n可以通过创建一个计算属性来间接监听数组的变化。\n\n```javascript\nimport { reactive, computed } from \"vue\";\n\nconst state = reactive({\n arr: [1, 2, 3],\n});\n\nconst arrLength = computed(() => state.arr.length);\n\narrLength.value; // 触发计算属性的求值\n\n// 当数组变化时，计算属性会自动更新，你可以在其他地方监听这个计算属性的变化\n```\n\n可以在需要的地方监听计算属性`arrLength`的变化，从而间接得知数组的变化。\n\n---\n\nVue 3 对于数组的某些操作（如`push`、`pop`、`shift`、`unshift`、`splice`等）是可以自动响应的，但对于直接通过索引赋值等操作可能需要特殊处理才能正确响应。\n",{"_58":503,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/997/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/997/timeline",{"_58":506,"_60":61,"_62":507,"_64":508,"_66":509,"_68":510,"_70":511,"_72":512,"_74":513,"_76":514,"_78":515,"_111":516,"_131":132,"_133":24,"_134":-5,"_135":523,"_137":524,"_159":152,"_153":526,"_155":527,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":528,"_169":529,"_175":530,"_177":531,"_189":533,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/988","https://api.github.com/repos/pro-collection/interview-question/issues/988/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/988/comments","https://api.github.com/repos/pro-collection/interview-question/issues/988/events","https://github.com/pro-collection/interview-question/issues/988",2583567560,"I_kwDOJGDC6c6Z_hzI",988,"[React]在应用中如何排查性能问题【热度: 255】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[517,518],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":519,"_72":520,"_58":521,"_117":522,"_119":129,"_121":24,"_122":130},6294910473,"LA_kwDOJGDC6c8AAAABdzS2CQ","https://api.github.com/repos/pro-collection/interview-question/labels/TOP100%E4%BA%92%E8%81%94%E7%BD%91","TOP100互联网",[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":525,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-13T01:50:19Z","2024-10-13T01:50:20Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：React 性能排查\n\n在 React 应用中，可以通过以下方法来排查性能问题：\n\n**一、使用 Chrome 开发者工具**\n\n1. **性能分析（Performance）**：\n\n - 打开 Chrome 浏览器，进入开发者工具。选择“Performance”选项卡。\n - 点击“Record”按钮开始录制页面的交互过程。进行一些典型的操作，如加载页面、点击按钮、滚动页面等。\n - 停止录制后，开发者工具会生成一个性能分析报告。这个报告显示了页面在录制期间的各种性能指标，包括 CPU 使用率、内存使用情况、网络请求等。\n - 分析报告中的“Main”线程，可以查看在录制期间哪些操作占用了大量的 CPU 时间。常见的性能瓶颈包括长时间的 JavaScript 执行、频繁的重渲染等。\n - 例如，如果发现某个函数的执行时间很长，可以点击该函数查看详细的调用栈，以确定问题的根源。\n\n2. **React 开发者工具（React Developer Tools）**：\n - 安装 React 开发者工具插件。在 Chrome 浏览器中，打开需要排查性能问题的 React 应用页面。\n - 打开开发者工具，选择“React”选项卡。\n - 在 React 开发者工具中，可以查看组件的层次结构、Props 和 State。这有助于确定哪些组件的状态变化频繁，或者哪些组件的渲染时间较长。\n - 特别关注那些在不必要的时候触发重新渲染的组件。可以通过检查组件的`shouldComponentUpdate`方法或使用`React.memo`、`PureComponent`等优化手段来减少不必要的重新渲染。\n\n**二、使用 React Profiler**\n\n1. **开启 Profiler**：\n\n - 在 React 应用中，可以使用`React.Profiler`组件来进行性能分析。在需要分析性能的组件树的根节点处包裹`React.Profiler`。\n - 例如：\n\n ```jsx\n import React from \"react\";\n import ReactDOM from \"react-dom\";\n import { Profiler } from \"react\";\n\n const App = () => (\n {\n console.log(`Component ${id} rendered in phase ${phase} with duration ${actualDuration} ms.`);\n }}\n >\n {/* 你的应用组件 */}\n \n );\n\n ReactDOM.render(, document.getElementById(\"root\"));\n ```\n\n2. **分析结果**：\n - 在应用运行过程中，`React.Profiler`会记录组件的渲染时间和其他性能指标。可以在控制台中查看输出的日志，了解每个组件的渲染时间和触发渲染的原因。\n - 根据日志信息，可以确定哪些组件的渲染时间较长，以及哪些操作导致了频繁的重新渲染。这有助于针对性地进行性能优化。\n\n**三、检查代码中的潜在问题**\n\n1. **避免不必要的重新渲染**：\n\n - 确保组件的`shouldComponentUpdate`方法正确实现，或者使用`React.memo`和`PureComponent`来避免不必要的重新渲染。检查组件的依赖项是否正确设置，避免因为不必要的状态变化而触发重新渲染。\n - 例如，如果一个组件的渲染结果只依赖于某个特定的 prop，而不是所有的 props，可以使用`React.memo`并指定一个自定义的比较函数来进行更精确的比较。\n\n2. **优化大型列表渲染**：\n\n - 对于大型列表的渲染，考虑使用`React.memo`和`key`属性来优化性能。确保为每个列表项设置一个唯一的`key`属性，这有助于 React 更高效地识别列表项的变化。\n - 避免在列表渲染中使用索引作为`key`属性，因为这可能会导致性能问题。如果列表项的顺序可能发生变化，使用一个稳定的唯一标识符作为`key`。\n\n3. **减少不必要的计算和副作用**：\n\n - 检查代码中是否存在不必要的计算或副作用。例如，避免在`render`方法中进行复杂的计算或发起网络请求。将这些操作移到生命周期方法或使用`useEffect`钩子中，并确保副作用的依赖项正确设置，以避免不必要的执行。\n - 对于频繁执行的计算，可以考虑使用 memoization（记忆化）技术来缓存结果，避免重复计算。\n\n4. **优化网络请求**：\n - 检查应用中的网络请求是否高效。避免频繁的重复请求，使用缓存策略来减少请求次数。确保网络请求的响应时间合理，可以使用工具来监测网络请求的性能，并考虑优化服务器端的响应时间。\n\n通过以上方法，可以系统地排查 React 应用中的性能问题，并采取相应的优化措施来提高应用的性能和响应速度。\n",{"_58":532,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/988/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/988/timeline",{"_58":535,"_60":61,"_62":536,"_64":537,"_66":538,"_68":539,"_70":540,"_72":541,"_74":542,"_76":543,"_78":544,"_111":545,"_131":132,"_133":24,"_134":-5,"_135":548,"_137":549,"_159":194,"_153":551,"_155":552,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":553,"_169":554,"_175":555,"_177":556,"_189":558,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/983","https://api.github.com/repos/pro-collection/interview-question/issues/983/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/983/comments","https://api.github.com/repos/pro-collection/interview-question/issues/983/events","https://github.com/pro-collection/interview-question/issues/983",2583177466,"I_kwDOJGDC6c6Z-Cj6",983,"[React] 在 setState 时发生了什么【热度: 169】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[546,547],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":550,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-12T15:29:46Z","2024-12-06T04:08:00Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：React setState 过程\n\n在 React 中，当调用`setState`时，会发生以下一系列事情：\n\n**一、触发状态更新**\n\n1. **调用 setState 方法**：\n - 当在 React 组件中调用`setState`方法时，React 会将这个状态更新请求排队。这意味着 React 不会立即更新组件的状态，而是将这个更新请求添加到一个队列中，等待合适的时机进行处理。\n - 例如：\n ```javascript\n this.setState({ count: this.state.count + 1 });\n ```\n - 在这个例子中，调用`setState`方法来增加`count`状态的值。\n\n**二、合并状态**\n\n1. **状态合并**：\n\n - 如果多次调用`setState`方法，React 会将这些状态更新请求合并在一起。这意味着 React 不会立即应用每个状态更新请求，而是会将它们合并成一个单一的状态更新。\n - 例如，如果在一个事件处理函数中多次调用`setState`方法：\n\n ```javascript\n handleClick() {\n this.setState({ count: this.state.count + 1 });\n this.setState({ count: this.state.count + 1 });\n }\n ```\n\n - React 不会立即将`count`的值增加两次，而是会将这两个状态更新请求合并成一个，最终只将`count`的值增加一次。\n\n2. **浅合并对象状态**：\n - 如果`setState`方法的参数是一个对象，React 会进行浅合并。这意味着如果状态是一个对象，并且只更新了其中的一部分属性，React 会将新的属性值合并到旧的状态对象中，而不会替换整个状态对象。\n - 例如：\n ```javascript\n this.setState({ user: { name: \"New Name\" } });\n ```\n - 如果原来的状态是`{ user: { name: 'Old Name', age: 30 } }`，那么调用`setState`方法后，新的状态将是`{ user: { name: 'New Name', age: 30 } }`。React 只会更新`user`对象的`name`属性，而不会影响`age`属性。\n\n**三、触发重新渲染**\n\n1. **协调阶段**：\n\n - 在合适的时机，React 会开始处理状态更新请求队列。React 会进入一个称为协调阶段的过程，在这个阶段，React 会比较组件的当前状态和新的状态，确定哪些组件需要重新渲染。\n - React 会使用一种称为虚拟 DOM 的技术来比较新旧状态，并确定最小化的更新操作，以提高性能。\n\n2. **重新渲染组件**：\n - 如果 React 确定某个组件的状态发生了变化，并且需要重新渲染，它会调用该组件的`render`方法来生成新的虚拟 DOM。然后，React 会将新的虚拟 DOM 与旧的虚拟 DOM 进行比较，确定需要进行哪些实际的 DOM 操作来更新页面。\n - 例如，如果一个组件的状态发生了变化，React 会调用该组件的`render`方法，生成新的虚拟 DOM，并将其与旧的虚拟 DOM 进行比较。如果有差异，React 会更新实际的 DOM，以反映新的状态。\n\n**四、异步执行**\n\n1. **异步更新状态**：\n\n - 在 React 中，`setState`方法通常是异步执行的。这意味着在调用`setState`方法后，不能立即依赖新的状态值。\n - 例如：\n\n ```javascript\n this.setState({ count: this.state.count + 1 });\n console.log(this.state.count);\n ```\n\n - 在这个例子中，`console.log`语句可能不会输出更新后的`count`值，因为`setState`方法是异步执行的，状态更新可能还没有完成。\n\n2. **使用回调函数**：\n - 如果需要在状态更新完成后执行一些操作，可以在`setState`方法中传递一个回调函数作为第二个参数。这个回调函数将在状态更新完成后被调用。\n - 例如：\n ```javascript\n this.setState({ count: this.state.count + 1 }, () => {\n console.log(this.state.count);\n });\n ```\n - 在这个例子中，回调函数将在状态更新完成后被调用，此时可以确保`count`的值已经更新。\n\n在 React 中，调用`setState`方法会触发一系列的操作，包括排队状态更新请求、合并状态、触发重新渲染等。\n",{"_58":557,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/983/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/983/timeline",{"_58":560,"_60":61,"_62":561,"_64":562,"_66":563,"_68":564,"_70":565,"_72":566,"_74":567,"_76":568,"_78":569,"_111":570,"_131":132,"_133":24,"_134":-5,"_135":577,"_137":578,"_159":152,"_153":580,"_155":580,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":581,"_169":582,"_175":583,"_177":584,"_189":586,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/982","https://api.github.com/repos/pro-collection/interview-question/issues/982/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/982/comments","https://api.github.com/repos/pro-collection/interview-question/issues/982/events","https://github.com/pro-collection/interview-question/issues/982",2583166071,"I_kwDOJGDC6c6Z9_x3",982,"[React] 在 redux 中如何写一个记录状态变更的日志插件【热度: 52】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[571,572],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":573,"_72":574,"_58":575,"_117":576,"_119":129,"_121":24,"_122":130},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":579,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-12T15:20:37Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：redux 插件\n\n在 Redux 中，可以编写一个日志插件来记录状态的变更。以下是实现的步骤：\n\n1. 创建日志插件函数：\n\n```javascript\nconst loggerMiddleware = (store) => (next) => (action) => {\n console.log(\"prev state\", store.getState());\n console.log(\"action\", action);\n const result = next(action);\n console.log(\"next state\", store.getState());\n return result;\n};\n```\n\n这个函数接收一个 Redux store 对象，返回一个中间件函数。这个中间件函数接收下一个中间件的调用函数`next`和当前的动作`action`。\n\n2. 将日志插件添加到 Redux store：\n\n```javascript\nimport { createStore, applyMiddleware } from \"redux\";\nimport rootReducer from \"./reducers\";\nimport loggerMiddleware from \"./loggerMiddleware\";\n\nconst store = createStore(rootReducer, applyMiddleware(loggerMiddleware));\n```\n\n在创建 Redux store 的时候，使用`applyMiddleware`函数将日志插件中间件添加到 store 中。\n\n这样，每当有动作被派发时，日志插件就会在控制台打印出当前的状态、动作和下一个状态，从而实现记录状态变更的目的。\n",{"_58":585,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/982/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/982/timeline",{"_58":588,"_60":61,"_62":589,"_64":590,"_66":591,"_68":592,"_70":593,"_72":594,"_74":595,"_76":596,"_78":597,"_111":598,"_131":132,"_133":24,"_134":-5,"_135":605,"_137":606,"_159":152,"_153":608,"_155":609,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":610,"_169":611,"_175":612,"_177":613,"_189":615,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/981","https://api.github.com/repos/pro-collection/interview-question/issues/981/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/981/comments","https://api.github.com/repos/pro-collection/interview-question/issues/981/events","https://github.com/pro-collection/interview-question/issues/981",2583156488,"I_kwDOJGDC6c6Z99cI",981,"[React] 如何实践数据不可变状态【热度: 114】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[599,600],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":601,"_72":602,"_58":603,"_117":604,"_119":129,"_121":24,"_122":130},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴",[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":607,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-12T15:11:53Z","2024-10-12T15:11:54Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：react 数据不可变\n\n在 React 中，可以通过以下几种方式来实践数据不可变状态：\n\n**一、使用不可变数据结构库（如 Immutable.js）**\n\n1. **安装和导入 Immutable.js**：\n\n - 首先，安装 Immutable.js 库：`npm install immutable`。\n - 然后，在 React 组件中导入所需的 Immutable 数据结构，如`Map`和`List`：\n\n ```javascript\n import { Map, List } from \"immutable\";\n ```\n\n2. **创建不可变状态**：\n\n - 使用 Immutable 数据结构来创建组件的初始状态。例如，使用`Map`来表示一个包含多个属性的对象：\n\n ```javascript\n const initialState = Map({\n count: 0,\n name: \"Initial Name\",\n });\n ```\n\n - 或者使用`List`来表示一个数组：\n\n ```javascript\n const initialList = List([1, 2, 3]);\n ```\n\n3. **更新不可变状态**：\n\n - Immutable.js 提供了一系列方法来更新不可变数据结构，这些方法会返回一个新的不可变对象，而不是修改原始对象。例如，要增加`count`属性的值，可以使用`set`方法：\n\n ```javascript\n const newState = state.set(\"count\", state.get(\"count\") + 1);\n ```\n\n - 要添加一个元素到`List`中，可以使用`push`方法：\n\n ```javascript\n const newList = list.push(4);\n ```\n\n4. **在 React 组件中使用**：\n\n - 在 React 组件中，可以使用`useState`钩子来管理不可变状态。将初始状态设置为 Immutable 对象，并在更新状态时使用 Immutable 的方法：\n\n ```javascript\n import React, { useState } from \"react\";\n import { Map } from \"immutable\";\n\n function MyComponent() {\n const [state, setState] = useState(Map({ count: 0 }));\n\n const increment = () => {\n setState(state.set(\"count\", state.get(\"count\") + 1));\n };\n\n return (\n

Count: {state.get(\"count\")}

\n \n

\n );\n }\n ```\n\n**二、使用纯函数和扩散语法（Spread Syntax）**\n\n1. **纯函数更新状态**：\n\n - 在 React 中，尽量使用纯函数来更新状态。纯函数是指一个函数的返回值仅取决于其输入参数，并且没有副作用。\n - 例如，定义一个函数来更新状态：\n\n ```javascript\n const updateState = (oldState, newData) => ({\n ...oldState,\n ...newData,\n });\n ```\n\n - 这个函数接受旧状态和新数据作为参数，并返回一个新的状态对象，其中包含旧状态和新数据的合并。\n\n2. **在 React 组件中使用**：\n\n - 在 React 组件中，可以使用`useState`钩子和纯函数来更新状态：\n\n ```javascript\n import React, { useState } from \"react\";\n\n function MyComponent() {\n const [state, setState] = useState({ count: 0 });\n\n const increment = () => {\n setState(updateState(state, { count: state.count + 1 }));\n };\n\n return (\n

Count: {state.count}

\n \n

\n );\n }\n ```\n\n - 在这个例子中，`increment`函数调用`updateState`函数来更新组件的状态，创建一个新的状态对象，而不是修改原始状态。\n\n**三、避免直接修改状态对象**\n\n1. **不要直接修改状态**：\n\n - 在 React 中，永远不要直接修改组件的状态对象。例如，不要使用以下方式修改状态：\n\n ```javascript\n state.count++;\n setState(state);\n ```\n\n - 这种方式会导致不可预测的行为，因为 React 依赖于状态的不可变性来进行渲染优化。\n\n2. **创建新的对象或数组**：\n - 当需要更新状态时，创建一个新的对象或数组来表示新的状态。可以使用对象字面量或数组字面量来创建新的对象或数组，或者使用扩散语法来复制旧对象或数组的属性，并添加或修改需要更新的属性。\n - 例如，要更新一个包含多个属性的对象状态，可以这样做：\n ```javascript\n const newState = {\n ...state,\n count: state.count + 1,\n name: \"New Name\",\n };\n setState(newState);\n ```\n - 要更新一个数组状态，可以使用`map`方法或扩散语法来创建一个新的数组：\n ```javascript\n const newList = state.list.map((item) => item * 2);\n setState({ ...state, list: newList });\n ```\n\n通过以上方法，可以在 React 中实践数据不可变状态，提高应用的性能和可预测性，避免意外的副作用，并帮助 React 进行更高效的渲染优化。\n",{"_58":614,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/981/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/981/timeline",{"_58":617,"_60":61,"_62":618,"_64":619,"_66":620,"_68":621,"_70":622,"_72":623,"_74":624,"_76":625,"_78":626,"_111":627,"_131":132,"_133":24,"_134":-5,"_135":630,"_137":631,"_159":152,"_153":633,"_155":633,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":634,"_169":635,"_175":636,"_177":637,"_189":639,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/980","https://api.github.com/repos/pro-collection/interview-question/issues/980/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/980/comments","https://api.github.com/repos/pro-collection/interview-question/issues/980/events","https://github.com/pro-collection/interview-question/issues/980",2583153378,"I_kwDOJGDC6c6Z98ri",980,"[React] 对象数据状态不可变是什么概念【热度: 113】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[628,629],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":601,"_72":602,"_58":603,"_117":604,"_119":129,"_121":24,"_122":130},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":632,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-10-12T15:09:08Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：react 数据不可变\n\n在 React 中，“对象数据状态不可变”是一个重要的概念，它主要有以下几个方面的含义：\n\n**一、保证数据的稳定性和可预测性**\n\n1. **避免意外的副作用**：\n\n - 当 React 组件的状态是可变的时，在复杂的应用中很容易出现意外的副作用。例如，如果多个组件共享一个可变的状态对象，一个组件对该对象的修改可能会影响到其他组件的行为，导致难以调试的错误。而不可变的对象状态确保了任何对状态的修改都会创建一个新的对象，不会影响到原始状态，从而避免了这种意外的副作用。\n - 例如，如果一个组件修改了一个共享的可变状态对象，而另一个组件依赖于这个对象的原始值，那么这个依赖关系可能会被破坏，导致错误的行为。而如果状态是不可变的，每个组件都可以放心地使用自己的状态副本，而不会担心其他组件对状态的修改。\n\n2. **易于理解和调试**：\n - 不可变的状态使得代码更容易理解和调试。因为状态的变化是通过创建新的对象来实现的，所以可以更容易地跟踪状态的变化过程。可以通过比较不同时间点的状态对象来确定哪些部分发生了变化，从而更容易找到问题的根源。\n - 例如，如果在调试一个 React 应用时，发现某个组件的行为不正确，可以通过检查该组件的状态变化历史来确定问题所在。如果状态是不可变的，可以很容易地比较不同时间点的状态对象，找出哪些属性发生了变化，以及这些变化是如何影响组件的行为的。\n\n**二、优化 React 的渲染性能**\n\n1. **高效的渲染优化**：\n\n - React 依赖于状态的不可变性来进行渲染优化。当组件的状态发生变化时，React 会通过比较新旧状态的引用是否相同来决定是否需要重新渲染组件。如果状态是不可变的，那么只要状态对象的引用发生了变化，React 就可以确定状态发生了变化，需要重新渲染组件。而如果状态是可变的，React 就需要进行深度比较来确定状态是否发生了变化，这会增加性能开销。\n - 例如，如果一个组件的状态是一个不可变的对象，当状态发生变化时，React 可以快速判断出状态发生了变化，因为新的状态对象的引用与旧的状态对象的引用不同。而如果状态是可变的，React 就需要进行深度比较来确定状态是否发生了变化，这可能会导致性能问题，特别是在大型应用中。\n\n2. **避免不必要的重新渲染**：\n - 通过使用不可变的状态，可以避免不必要的重新渲染。如果一个组件的状态没有发生变化，React 可以直接使用上次渲染的结果，而不需要重新执行组件的渲染函数。这可以提高应用的性能，特别是在复杂的应用中，有很多组件需要频繁渲染的情况下。\n - 例如，如果一个组件的状态是一个不可变的对象，并且在某个操作后状态没有发生变化，React 可以直接使用上次渲染的结果，而不需要重新渲染该组件。而如果状态是可变的，React 就需要进行深度比较来确定状态是否发生了变化，这可能会导致不必要的重新渲染。\n\n**三、实现方式和工具**\n\n1. **使用不可变数据结构库**：\n\n - 在 React 中，可以使用不可变数据结构库，如 Immutable.js，来实现不可变的对象状态。Immutable.js 提供了一系列不可变的数据结构，如`Map`、`List`和`Set`，这些数据结构可以有效地管理不可变的对象状态。\n - 例如，可以使用 Immutable.js 的`Map`来表示一个不可变的对象状态：\n\n ```javascript\n import { Map } from \"immutable\";\n\n const initialState = Map({\n count: 0,\n name: \"Initial Name\",\n });\n ```\n\n - 然后，可以使用 Immutable.js 的方法来更新状态，这些方法会返回一个新的不可变对象，而不是修改原始对象：\n\n ```javascript\n const newState = state.set(\"count\", state.get(\"count\") + 1);\n ```\n\n2. **使用纯函数和扩散语法**：\n\n - 另一种实现不可变对象状态的方式是使用纯函数和扩散语法。纯函数是指一个函数的返回值仅取决于其输入参数，并且没有副作用。可以使用纯函数来更新状态，通过创建一个新的对象来表示新的状态，而不是修改原始状态。\n - 例如，可以定义一个纯函数来更新状态：\n\n ```javascript\n const updateState = (oldState, newData) => ({\n ...oldState,\n ...newData,\n });\n ```\n\n - 然后，可以在 React 组件中使用这个纯函数来更新状态：\n\n ```javascript\n const [state, setState] = useState({ count: 0 });\n\n const increment = () => {\n setState(updateState(state, { count: state.count + 1 }));\n };\n ```\n\n - 在这个例子中，`increment`函数调用`updateState`函数来更新组件的状态，创建一个新的状态对象，而不是修改原始状态。\n",{"_58":638,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/980/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/980/timeline",{"_58":641,"_60":61,"_62":642,"_64":643,"_66":644,"_68":645,"_70":646,"_72":647,"_74":648,"_76":649,"_78":650,"_111":651,"_131":132,"_133":24,"_134":-5,"_135":654,"_137":655,"_159":152,"_153":657,"_155":658,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":659,"_169":660,"_175":661,"_177":662,"_189":664,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/936","https://api.github.com/repos/pro-collection/interview-question/issues/936/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/936/comments","https://api.github.com/repos/pro-collection/interview-question/issues/936/events","https://github.com/pro-collection/interview-question/issues/936",2540659835,"I_kwDOJGDC6c6Xb2R7",936,"[Vue] 对比一下 vuex 和 Pinia 两个状态库【热度: 300】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[652,653],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":656,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T06:11:54Z","2024-09-22T06:11:55Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 状态库对比\n\nVuex 和 Pinia 都是用于 Vue 应用程序的状态管理库，它们有一些相似之处，但也存在一些差异。以下是它们的对比：\n\n**一、相似之处**\n\n1. **集中式状态管理**：\n\n - 两者都提供了一种集中式的方式来管理应用程序的状态。这使得状态可以在不同的组件之间共享，并且可以更容易地跟踪和调试状态的变化。\n - 例如，在一个电商应用中，用户的购物车状态可以存储在状态管理库中，以便在不同的页面和组件中访问和更新。\n\n2. **响应式状态**：\n - Vuex 和 Pinia 都与 Vue 的响应式系统集成，使得状态的变化可以自动触发相关组件的重新渲染。\n - 当购物车中的商品数量发生变化时，相关的组件可以自动更新以反映这个变化。\n\n**二、不同之处**\n\n1. **语法和 API**：\n\n - **Pinia**：\n\n - Pinia 提供了一种更加简洁和直观的 API。它使用类似于 Vue 组件的语法来定义状态和操作，使得代码更加易读和易于维护。\n - 例如，定义一个 store 可以像这样：\n\n ```javascript\n import { defineStore } from \"pinia\";\n\n export const useCartStore = defineStore(\"cart\", {\n state: () => ({\n items: [],\n }),\n actions: {\n addItem(item) {\n this.items.push(item);\n },\n },\n });\n ```\n\n - **Vuex**：\n\n - Vuex 的语法相对较为复杂，需要定义 mutations、actions 和 getters 等不同的概念来管理状态。\n - 例如，定义一个 store 可能如下所示：\n\n ```javascript\n import Vuex from \"vuex\";\n\n const store = new Vuex.Store({\n state: {\n items: [],\n },\n mutations: {\n ADD_ITEM(state, item) {\n state.items.push(item);\n },\n },\n actions: {\n addItem({ commit }, item) {\n commit(\"ADD_ITEM\", item);\n },\n },\n getters: {\n cartItems: (state) => state.items,\n },\n });\n ```\n\n2. **模块系统**：\n\n - **Pinia**：\n\n - Pinia 的模块系统更加灵活和易于使用。可以轻松地将 store 拆分为多个模块，并且可以在不同的模块之间共享状态和操作。\n - 例如，可以创建一个名为`user`的模块和一个名为`cart`的模块，并在它们之间共享一些状态和操作：\n\n ```javascript\n import { defineStore } from \"pinia\";\n\n const useUserStore = defineStore(\"user\", {\n //...\n });\n\n const useCartStore = defineStore(\"cart\", {\n state: () => ({\n //...\n }),\n actions: {\n addItem(item) {\n // 可以访问 userStore 的状态\n if (useUserStore().isLoggedIn) {\n //...\n }\n },\n },\n });\n ```\n\n - **Vuex**：\n - Vuex 的模块系统也很强大，但相对来说更加复杂。需要使用命名空间来区分不同模块的 actions、mutations 和 getters，并且在模块之间共享状态和操作需要一些额外的配置。\n\n3. **类型支持**：\n\n - **Pinia**：\n\n - Pinia 对 TypeScript 的支持非常好，可以轻松地为 store 定义类型，并且在开发过程中可以获得更好的类型提示和错误检查。\n - 例如，可以使用 TypeScript 来定义一个 store 的类型：\n\n ```javascript\n import { defineStore } from 'pinia';\n\n interface CartItem {\n id: number;\n name: string;\n price: number;\n }\n\n export const useCartStore = defineStore('cart', {\n state: () => ({\n items: [] as CartItem[],\n }),\n //...\n });\n ```\n\n - **Vuex**：\n - Vuex 也支持 TypeScript，但相对来说需要一些额外的配置和类型定义文件来获得更好的类型支持。\n\n4. **开发体验**：\n - **Pinia**：\n - Pinia 提供了一些开发工具，如 Pinia Devtools，可以方便地调试和检查 store 的状态和操作。它还与 Vue Devtools 集成，使得在开发过程中可以更好地跟踪状态的变化。\n - Pinia 的 API 更加简洁，使得开发过程更加高效和愉快。\n - **Vuex**：\n - Vuex 也有一些开发工具，如 Vuex Devtools，但相对来说功能可能没有 Pinia Devtools 那么强大。\n - Vuex 的语法相对较为复杂，可能需要一些时间来适应和掌握。\n\n总的来说，Pinia 和 Vuex 都是强大的状态管理库，选择哪一个取决于你的具体需求和个人偏好。如果你喜欢简洁和直观的 API，并且对 TypeScript 有较好的支持需求，那么 Pinia 可能是一个更好的选择。如果你已经熟悉 Vuex 并且对其功能和模块系统有特定的需求，那么 Vuex 也是一个可靠的选择。\n",{"_58":663,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/936/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/936/timeline",{"_58":666,"_60":61,"_62":667,"_64":668,"_66":669,"_68":670,"_70":671,"_72":672,"_74":673,"_76":674,"_78":675,"_111":676,"_131":132,"_133":24,"_134":-5,"_135":678,"_137":679,"_159":152,"_153":681,"_155":682,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":683,"_169":684,"_175":685,"_177":686,"_189":688,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/935","https://api.github.com/repos/pro-collection/interview-question/issues/935/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/935/comments","https://api.github.com/repos/pro-collection/interview-question/issues/935/events","https://github.com/pro-collection/interview-question/issues/935",2540648448,"I_kwDOJGDC6c6XbzgA",935,"[Vue] 介绍一下 vue 工具链【热度: 53】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[677],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":680,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:29:06Z","2024-09-22T05:29:07Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 工具链\n\n> 作者备注\n>\n> 这个其实没有啥好说的，官网上面都有。直接看官网即可 https://cn.vuejs.org/guide/scaling-up/tooling\n\n以下是 Vue 的相关工具链介绍：\n\n**一、项目脚手架**\n\n1. **Vue CLI**：\n - 功能：Vue CLI 是一个官方的 Vue.js 项目脚手架工具。它提供了快速搭建 Vue 项目的模板和配置选项，可以轻松生成项目结构、配置开发服务器、集成各种构建工具和插件等。\n - 特点：支持多种项目模板，如默认模板、移动端模板、PWA（Progressive Web App）模板等。可以方便地进行项目配置和扩展，如添加路由、状态管理、单元测试等功能模块。\n\n**二、IDE 支持**\n\n1. **Visual Studio Code**：\n\n - 功能：一款非常流行的轻量级代码编辑器，对 Vue 有很好的支持。通过安装 Vue 相关的扩展插件，可以实现语法高亮、智能提示、代码片段、调试等功能。\n - 特点：拥有丰富的扩展生态系统，如 Vetur 插件提供了全面的 Vue 开发支持，包括单文件组件（SFC）的语法高亮、模板智能提示、组件自动补全等功能。同时，VS Code 的调试功能也非常强大，可以方便地对 Vue 项目进行调试。\n\n2. **WebStorm**：\n - 功能：一款功能强大的专业 IDE，对 Vue 也有很好的支持。提供了全面的开发功能，包括语法高亮、智能提示、代码重构、调试、版本控制等。\n - 特点：具有强大的代码分析和错误检测功能，可以帮助开发者快速发现和修复代码中的问题。同时，WebStorm 还支持多种前端技术栈，方便开发者在一个 IDE 中进行多种技术的开发。\n\n**三、Chrome 开发插件**\n\n1. **Vue Devtools**：\n - 功能：这是 Vue.js 官方推出的 Chrome 浏览器插件。它可以帮助开发者在浏览器中调试 Vue 应用程序，提供了组件层次结构查看、状态检查、事件监听、性能分析等功能。\n - 特点：能够实时查看 Vue 应用的组件结构和状态，方便开发者进行调试和优化。可以在开发过程中快速定位问题，提高开发效率。\n\n**四、TS 支持**\n\n1. **Vue + TypeScript**：\n - 功能：Vue 本身支持 TypeScript，可以使用 TypeScript 来编写 Vue 应用程序。通过使用 TypeScript，可以获得静态类型检查、更好的代码提示和自动补全等功能，提高代码的可维护性和可扩展性。\n - 特点：Vue 提供了专门的类型定义文件，可以让 TypeScript 正确地识别 Vue 的语法和 API。同时，Vue 的官方文档也提供了详细的 TypeScript 支持指南，帮助开发者快速上手。\n\n**五、测试**\n\n1. **Jest**：\n\n - 功能：一个流行的 JavaScript 测试框架，也适用于 Vue 项目。可以用于单元测试、集成测试和快照测试等。提供了丰富的断言库和测试工具，方便开发者编写和运行测试用例。\n - 特点：具有自动模拟、并行测试、代码覆盖率报告等功能。可以与 Vue CLI 集成，方便地进行项目的测试配置和运行。\n\n2. **Vue Test Utils**：\n - 功能：这是 Vue.js 官方提供的测试工具库，用于编写 Vue 组件的单元测试。提供了一系列的 API，可以方便地获取组件实例、模拟用户交互、检查组件状态等。\n - 特点：与 Jest 等测试框架配合使用，可以方便地对 Vue 组件进行测试。支持 Vue 的各种特性，如响应式数据、计算属性、生命周期钩子等。\n\n**六、代码规范**\n\n1. **ESLint**：\n\n - 功能：一个强大的 JavaScript 代码检查工具，可以用于检查 Vue 项目中的代码规范问题。可以配置各种规则和插件，对代码的格式、语法、风格等进行检查和规范。\n - 特点：拥有丰富的规则集和插件生态系统，可以根据项目的需求进行定制化配置。可以与各种开发工具集成，如 VS Code、WebStorm 等，在开发过程中实时检查代码规范问题。\n\n2. **Prettier**：\n - 功能：一个代码格式化工具，可以自动格式化 Vue 项目中的代码，使其符合统一的代码风格。支持多种前端技术栈，包括 JavaScript、Vue、CSS 等。\n - 特点：具有简洁的配置和快速的格式化速度。可以与各种开发工具集成，实现自动格式化功能，提高代码的可读性和可维护性。\n\n**七、格式化**\n\n1. **Prettier**：\n - 如上述代码规范中提到，Prettier 主要用于代码格式化，确保代码风格的一致性。它可以自动格式化 Vue 的单文件组件、JavaScript、CSS 等代码，使代码更加易读和易于维护。\n\n**八、单文件组件自定义块集成**\n\n1. **Vue Loader**：\n - 功能：这是 Webpack 或 Vue CLI 中用于处理 Vue 单文件组件的加载器。它可以解析 Vue 的单文件组件，将其拆分为模板、脚本和样式三个部分，并进行相应的处理和编译。\n - 特点：支持自定义块的处理，可以通过在单文件组件中添加自定义的块标签，如``、``等，来扩展组件的功能和文档。可以与各种构建工具和插件集成，实现更强大的功能。\n\n**九、底层库**\n\n1. **Vue Router**：\n\n - 功能：Vue 的官方路由库，用于实现单页应用的路由功能。可以定义不同的路由路径，对应不同的组件显示，实现页面之间的导航和切换。\n - 特点：支持动态路由、嵌套路由、路由守卫等功能。可以与 Vue 的响应式系统深度集成，实现流畅的页面切换和导航体验。\n\n2. **Vuex**：\n - 功能：Vue 的官方状态管理库，用于集中管理 Vue 应用的状态。可以将应用中的数据存储在一个集中的状态容器中，通过 mutations 和 actions 来修改状态，实现数据的共享和管理。\n - 特点：支持模块化、严格模式、插件扩展等功能。可以与 Vue 的组件系统深度集成，实现高效的数据管理和响应式更新。\n",{"_58":687,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/935/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/935/timeline",{"_58":690,"_60":61,"_62":691,"_64":692,"_66":693,"_68":694,"_70":695,"_72":696,"_74":697,"_76":698,"_78":699,"_111":700,"_131":132,"_133":24,"_134":-5,"_135":702,"_137":703,"_159":144,"_153":705,"_155":706,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":707,"_169":708,"_175":709,"_177":710,"_189":712,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/934","https://api.github.com/repos/pro-collection/interview-question/issues/934/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/934/comments","https://api.github.com/repos/pro-collection/interview-question/issues/934/events","https://github.com/pro-collection/interview-question/issues/934",2540647218,"I_kwDOJGDC6c6XbzMy",934,"[Vue] 介绍一下 component 动态组件【热度: 184】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[701],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":704,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:23:43Z","2024-10-07T13:00:59Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：component 动态组件\n\n在 Vue 中，动态组件是一种强大的特性，可以根据不同的条件在运行时动态地切换组件的显示。\n\n**一、基本概念**\n\n动态组件使用特殊的``标签结合`is`属性来实现。`is`属性可以接受一个字符串或变量，用于指定要渲染的组件名称或组件选项对象。Vue 会根据`is`属性的值来动态地加载和渲染相应的组件。\n\n**二、使用方法**\n\n1. **使用字符串指定组件名称**：\n\n - 可以直接在`is`属性中使用字符串来指定组件的名称。例如：\n\n ```html\n \n \n ```\n\n - 在这个例子中，根据`currentComponent`变量的值，``标签会动态地渲染`ComponentA`或`ComponentB`组件。\n\n2. **使用变量指定组件选项对象**：\n\n - 也可以使用变量来指定一个组件选项对象。例如：\n\n ```html\n \n \n ```\n\n - 这里，`currentComponent`变量可以在运行时被赋值为`ComponentA`或`ComponentB`的组件选项对象，从而实现动态切换组件。\n\n3. **结合`v-if`或`v-show`控制组件显示**：\n - 可以结合`v-if`或`v-show`指令来控制动态组件的显示条件。例如：\n ```html\n \n \n ```\n - 在这个例子中，只有当`showComponent`为`true`时，动态组件才会被渲染。\n\n**三、优势和应用场景**\n\n1. **优势**：\n\n - **灵活性**：可以根据不同的业务逻辑和用户交互动态地切换组件，提高应用的灵活性和可维护性。\n - **代码复用**：可以在多个地方使用相同的动态组件机制，减少重复代码。\n - **性能优化**：只在需要的时候加载和渲染特定的组件，可以提高应用的性能。\n\n2. **应用场景**：\n - **页面布局切换**：根据用户的操作或应用的状态，动态地切换不同的页面布局组件。例如，在一个管理系统中，根据用户的角色显示不同的菜单栏和功能区域。\n - **内容展示切换**：根据数据的类型或状态，动态地展示不同的内容组件。例如，在一个新闻应用中，根据新闻的类型显示不同的新闻详情组件。\n - **步骤向导**：在一个多步骤的向导流程中，使用动态组件来逐步展示不同的步骤组件。用户可以根据向导的进度动态地切换到不同的步骤，提高用户体验。\n",{"_58":711,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/934/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/934/timeline",{"_58":714,"_60":61,"_62":715,"_64":716,"_66":717,"_68":718,"_70":719,"_72":720,"_74":721,"_76":722,"_78":723,"_111":724,"_131":132,"_133":24,"_134":-5,"_135":726,"_137":727,"_159":152,"_153":729,"_155":729,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":730,"_169":731,"_175":732,"_177":733,"_189":735,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/933","https://api.github.com/repos/pro-collection/interview-question/issues/933/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/933/comments","https://api.github.com/repos/pro-collection/interview-question/issues/933/events","https://github.com/pro-collection/interview-question/issues/933",2540647047,"I_kwDOJGDC6c6XbzKH",933,"[Vue] 详细介绍一下 teleport 内置组件【热度: 100】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[725],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":728,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:22:57Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：teleport 内置组件\n\n在 Vue 中，``是一个内置组件，它提供了一种将组件的模板内容渲染到指定 DOM 节点位置的方式，而不是在组件自身的位置渲染。\n\n**一、作用与优势**\n\n1. 灵活布局：允许你将特定的组件内容放置在页面的任何位置，而不受组件层次结构的限制。这对于创建模态框、通知、工具提示等需要在特定位置显示的元素非常有用。\n2. 分离关注点：可以将与特定功能相关的模板内容从组件的逻辑中分离出来，并将其渲染到合适的位置。这样可以使组件的代码更加清晰和易于维护。\n3. 性能优化：在某些情况下，将某些内容渲染到远离其他组件的位置可以减少不必要的重绘和回流，提高性能。\n\n**二、使用方法**\n\n1. 基本用法：\n\n ```vue\n \n\n \n ```\n\n 在这个例子中，``组件将包含模态框内容的`

`渲染到了``元素中，使其在页面上居中显示。\n\n2. 指定目标选择器：\n 可以使用任何有效的 CSS 选择器作为`to`属性的值来指定目标位置。例如：\n\n ```vue\n \n ```\n\n 这里将通知内容渲染到具有`id`为`my-target-element`的元素中。\n\n3. 动态目标：\n 可以使用响应式数据来动态地确定``的目标位置。例如：\n\n ```vue\n \n\n \n ```\n\n 在这个例子中，用户可以通过输入框输入目标元素的`id`，从而动态地确定``的目标位置。\n\n**三、注意事项**\n\n1. 事件冒泡：当在``内部的元素上触发事件时，事件会按照正常的 DOM 事件冒泡机制传播到目标位置的父元素中。如果需要处理这些事件，确保在目标位置的父元素中正确地监听和处理这些事件。\n2. 样式隔离：如果``内部的内容需要特定的样式，确保这些样式不会影响到目标位置的其他元素。可以使用 CSS 模块化、命名空间或特定的选择器来确保样式的隔离。\n3. 响应式数据：如果在``内部使用了响应式数据，确保这些数据在目标位置的上下文中也能正确地更新。可以使用 Vue 的响应式系统来确保数据的一致性。\n",{"_58":734,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/933/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/933/timeline",{"_58":737,"_60":61,"_62":738,"_64":739,"_66":740,"_68":741,"_70":742,"_72":743,"_74":744,"_76":745,"_78":746,"_111":747,"_131":132,"_133":24,"_134":-5,"_135":749,"_137":750,"_159":152,"_153":752,"_155":752,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":753,"_169":754,"_175":755,"_177":756,"_189":758,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/932","https://api.github.com/repos/pro-collection/interview-question/issues/932/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/932/comments","https://api.github.com/repos/pro-collection/interview-question/issues/932/events","https://github.com/pro-collection/interview-question/issues/932",2540646565,"I_kwDOJGDC6c6XbzCl",932,"[Vue] 有哪些内置组件【热度: 355】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[748],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":751,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:21:02Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 内置组件\n\n在 Vue 中，有一些内置组件，主要包括以下几个：\n\n**一、``动态组件**\n\n1. 作用：用于根据条件动态地渲染不同的组件。\n2. 使用方法：\n\n ```vue\n \n\n \n ```\n\n**二、``过渡组件**\n\n1. 作用：为元素或组件的插入、更新和移除添加过渡效果。\n2. 使用方法：\n\n ```vue\n \n\n \n\n \n ```\n\n**三、``传送门组件**\n\n1. 作用：将一个组件的模板内容渲染到指定的 DOM 节点位置，而不是在组件自身的位置。\n2. 使用方法：\n\n ```vue\n \n\n \n ```\n\n**四、``缓存组件**\n\n1. 作用：在组件切换时缓存不活动的组件实例，避免重复渲染，提高性能。\n2. 使用方法：\n\n ```vue\n \n\n \n ```\n",{"_58":757,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/932/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/932/timeline",{"_58":760,"_60":61,"_62":761,"_64":762,"_66":763,"_68":764,"_70":765,"_72":766,"_74":767,"_76":768,"_78":769,"_111":770,"_131":132,"_133":24,"_134":-5,"_135":772,"_137":773,"_159":152,"_153":775,"_155":776,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":777,"_169":778,"_175":779,"_177":780,"_189":782,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/931","https://api.github.com/repos/pro-collection/interview-question/issues/931/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/931/comments","https://api.github.com/repos/pro-collection/interview-question/issues/931/events","https://github.com/pro-collection/interview-question/issues/931",2540645807,"I_kwDOJGDC6c6Xby2v",931,"[Vue] 实现一个简单的 i18n (国际化 (Internationalization) 的缩写) 插件【热度: 166】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[771],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":774,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:17:41Z","2024-09-22T05:17:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue i18n 插件实现\n\n> 作者备注\n>\n> 这个是一个简单的官方案例，如果阅读过官方文档，就没有任何难点。所以暂定为「中级」\n\n实现下面的这样的一个插件 `

`\n\n以下是一个简单的 Vue 3 的国际化插件实现：\n\n1. 创建一个名为`i18nPlugin.js`的文件：\n\n```javascript\nconst i18nPlugin = {\n install(app, options) {\n const translations = options.translations;\n app.config.globalProperties.$translate = (key) => {\n const parts = key.split(\".\");\n let value = translations[parts[0]];\n for (let i = 1; i < parts.length && value; i++) {\n value = value[parts[i]];\n }\n return value || key;\n };\n },\n};\n\nexport default i18nPlugin;\n```\n\n2. 在你的 Vue 3 项目中使用这个插件：\n\n假设你有以下的语言翻译对象：\n\n```javascript\n// en.js\nconst enTranslations = {\n greetings: {\n hello: 'Hello!',\n },\n};\n\nexport default enTranslations;\n\n// zh.js\nconst zhTranslations = {\n greetings: {\n hello: '你好！',\n },\n};\n\nexport default zhTranslations;\n```\n\n在项目的入口文件（通常是`main.js`或`main.ts`）中：\n\n```javascript\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport enTranslations from \"./locales/en\";\nimport i18nPlugin from \"./i18nPlugin\";\n\nconst app = createApp(App);\n\napp.use(i18nPlugin, { translations: enTranslations });\n\napp.mount(\"#app\");\n```\n\n这样，在你的组件中就可以使用`{{ $translate('greetings.hello') }}`来获取翻译后的文本，并且可以通过修改传入插件的翻译对象来切换不同的语言。\n",{"_58":781,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/931/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/931/timeline",{"_58":784,"_60":61,"_62":785,"_64":786,"_66":787,"_68":788,"_70":789,"_72":790,"_74":791,"_76":792,"_78":793,"_111":794,"_131":132,"_133":24,"_134":-5,"_135":796,"_137":797,"_159":152,"_153":799,"_155":800,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":801,"_169":802,"_175":803,"_177":804,"_189":806,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/930","https://api.github.com/repos/pro-collection/interview-question/issues/930/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/930/comments","https://api.github.com/repos/pro-collection/interview-question/issues/930/events","https://github.com/pro-collection/interview-question/issues/930",2540645197,"I_kwDOJGDC6c6XbytN",930,"[Vue] 插件是什么概念，有什么作用，该怎么用【热度: 550】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[795],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":798,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:15:15Z","2024-09-22T05:15:16Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 插件\n\n在 Vue 中，插件是一种用于增强 Vue 功能的工具。\n\n**一、概念**\n\nVue 插件是一个包含`install`方法的对象，或者是一个函数，这个函数接收 Vue 的构造函数作为参数。插件可以为 Vue 添加全局的功能，如全局组件、全局指令、全局过滤器、全局混入（mixin）等，也可以扩展 Vue 的实例方法或原型属性。\n\n**二、作用**\n\n1. **添加全局功能**：\n - **全局组件**：可以通过插件注册全局组件，使得在整个项目的任何组件中都可以直接使用这个组件，无需在每个组件中单独引入。例如，一个弹窗组件可以作为插件注册为全局组件，方便在项目中的各个地方弹出统一风格的弹窗。\n - **全局指令**：插件可以添加全局指令，用于在模板中对元素进行特定的操作。比如，一个`v-focus`指令可以在元素挂载时自动聚焦该元素，提高用户体验。\n - **全局过滤器**：用于对数据进行格式化处理。例如，一个全局过滤器可以将日期格式化为特定的字符串格式，方便在模板中显示日期数据。\n - **全局混入**：可以在多个组件之间共享一些通用的选项或方法。例如，一个全局混入可以为多个组件添加相同的生命周期钩子函数或方法，减少重复代码。\n2. **扩展 Vue 实例**：\n - 插件可以向 Vue 实例添加新的方法或属性，使得在项目中的任何地方都可以通过`this`访问这些方法或属性。例如，一个插件可以添加一个`$http`方法，用于发送 HTTP 请求，方便在组件中进行数据获取。\n3. **集成第三方库**：\n - 可以将第三方库包装成 Vue 插件，使其与 Vue 更好地集成。例如，将 Vue Router（路由库）和 Vuex（状态管理库）作为插件使用，方便在 Vue 项目中进行路由管理和状态管理。\n\n**三、使用方法**\n\n1. **创建插件**：\n - 插件可以是一个对象，包含`install`方法：\n ```javascript\n const myPlugin = {\n install(Vue) {\n // 在这里添加全局功能或扩展 Vue 实例\n Vue.prototype.$myMethod = function () {\n console.log(\"This is a custom method added by the plugin.\");\n };\n },\n };\n ```\n - 也可以是一个函数，接收 Vue 构造函数作为参数：\n ```javascript\n function myPlugin(Vue) {\n Vue.prototype.$myMethod = function () {\n console.log(\"This is a custom method added by the plugin.\");\n };\n }\n ```\n2. **使用插件**：\n\n - 在 Vue 项目中，可以通过`Vue.use()`方法来使用插件。通常在项目的入口文件（如`main.js`）中进行插件的安装。\n\n ```javascript\n import Vue from \"vue\";\n import App from \"./App.vue\";\n // 引入插件\n import myPlugin from \"./myPlugin\";\n\n Vue.use(myPlugin);\n\n new Vue({\n render: (h) => h(App),\n }).$mount(\"#app\");\n ```\n\n3. **在组件中使用插件提供的功能**：\n - 在组件的方法、生命周期钩子函数或模板中，可以通过`this.$myMethod()`来调用插件添加的方法。\n ```html\n \n \n ```\n\n通过使用插件，可以将一些通用的功能封装起来，提高代码的可维护性和可复用性，同时也方便在项目中进行功能的扩展和集成第三方库。\n",{"_58":805,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/930/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/930/timeline",{"_58":808,"_60":61,"_62":809,"_64":810,"_66":811,"_68":812,"_70":813,"_72":814,"_74":815,"_76":816,"_78":817,"_111":818,"_131":132,"_133":24,"_134":-5,"_135":820,"_137":821,"_159":152,"_153":823,"_155":823,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":824,"_169":825,"_175":826,"_177":827,"_189":829,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/929","https://api.github.com/repos/pro-collection/interview-question/issues/929/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/929/comments","https://api.github.com/repos/pro-collection/interview-question/issues/929/events","https://github.com/pro-collection/interview-question/issues/929",2540644569,"I_kwDOJGDC6c6XbyjZ",929,"[Vue] vue 如何配置全局使用的定义或者常量【热度: 337】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[819],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":822,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:12:47Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 全局配置\n\n在 Vue 中，可以通过以下几种方式配置全局使用的定义或常量：\n\n**一、使用 Vue 原型（不推荐在 Vue 3 中使用）**\n\n在 Vue 2 中，可以通过在`main.js`文件中向 Vue 的原型上添加属性来实现全局定义或常量的访问。但在 Vue 3 中不推荐这种方式，因为它可能会导致一些潜在的问题。\n\n```javascript\n// Vue 2 示例\nVue.prototype.$globalConstant = \"This is a global constant\";\n```\n\n**二、使用 provide/inject（推荐）**\n\n1. 在根组件中提供全局定义或常量：\n\n ```javascript\n import { createApp } from \"vue\";\n\n const app = createApp({\n setup() {\n return {\n globalValue: \"Global value\",\n };\n },\n provide() {\n return {\n global: this.globalValue,\n };\n },\n });\n\n app.mount(\"#app\");\n ```\n\n2. 在子组件中注入并使用：\n\n ```vue\n \n\n \n ```\n\n**三、创建全局变量文件并导入**\n\n1. 创建一个专门的文件用于存储全局定义或常量，例如`globals.js`：\n\n ```javascript\n export const globalConstant = \"This is a global constant\";\n ```\n\n2. 在需要使用的地方导入：\n ```javascript\n import { globalConstant } from \"./globals.js\";\n ```\n\n**四、使用 Vuex（状态管理）**\n\n如果你的全局定义或常量需要在多个组件之间共享并且可能会发生变化，可以考虑使用 Vuex 进行状态管理。\n\n1. 安装和设置 Vuex：\n\n ```bash\n npm install vuex@next\n ```\n\n 创建一个`store.js`文件：\n\n ```javascript\n import { createStore } from \"vuex\";\n\n const store = createStore({\n state: {\n globalValue: \"Global value from Vuex\",\n },\n mutations: {},\n actions: {},\n modules: {},\n });\n\n export default store;\n ```\n\n2. 在`main.js`中引入并挂载 Vuex：\n\n ```javascript\n import { createApp } from \"vue\";\n import App from \"./App.vue\";\n import store from \"./store\";\n\n const app = createApp(App);\n app.use(store);\n app.mount(\"#app\");\n ```\n\n3. 在组件中使用：\n\n ```vue\n \n\n \n ```\n",{"_58":828,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/929/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/929/timeline",{"_58":831,"_60":61,"_62":832,"_64":833,"_66":834,"_68":835,"_70":836,"_72":837,"_74":838,"_76":839,"_78":840,"_111":841,"_131":132,"_133":24,"_134":-5,"_135":843,"_137":844,"_159":152,"_153":846,"_155":847,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":848,"_169":849,"_175":850,"_177":851,"_189":853,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/928","https://api.github.com/repos/pro-collection/interview-question/issues/928/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/928/comments","https://api.github.com/repos/pro-collection/interview-question/issues/928/events","https://github.com/pro-collection/interview-question/issues/928",2540642959,"I_kwDOJGDC6c6XbyKP",928,"[Vue] 如何自定义指令【热度: 159】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[842],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":845,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:06:16Z","2024-09-22T05:06:17Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue 自定义指令\n\n在 Vue 中，可以通过以下步骤来自定义指令：\n\n**一、全局自定义指令**\n\n1. 使用`Vue.directive()`方法定义全局指令：\n\n ```javascript\n Vue.directive(\"my-directive\", {\n // 指令的定义对象\n bind(el, binding, vnode) {\n // 在元素绑定指令时调用\n // el 是指令所绑定的元素\n // binding 包含指令的信息，如 value、arg、modifiers 等\n // vnode 是虚拟节点\n },\n inserted(el, binding, vnode) {\n // 被绑定元素插入父节点时调用\n },\n update(el, binding, vnode, oldVnode) {\n // 当组件更新时调用，包括数据更新和组件本身的更新\n },\n componentUpdated(el, binding, vnode, oldVnode) {\n // 组件及其子组件的 VNode 更新后调用\n },\n unbind(el, binding, vnode) {\n // 指令与元素解绑时调用\n },\n });\n ```\n\n2. 在模板中使用自定义指令：\n ```html\n

\n ```\n\n**二、局部自定义指令**\n\n1. 在组件中定义局部指令：\n\n ```javascript\n export default {\n directives: {\n \"my-directive\": {\n bind(el, binding, vnode) {\n // 指令定义\n },\n },\n },\n };\n ```\n\n2. 在组件的模板中使用局部自定义指令：\n ```html\n \n ```\n\n**三、指令定义对象的参数说明**\n\n1. `el`：指令所绑定的元素，可以通过这个参数来操作元素的属性、样式等。\n2. `binding`：一个对象，包含以下属性：\n - `value`：指令的绑定值，例如在`v-my-directive=\"someValue\"`中，`value`就是`someValue`的值。\n - `arg`：指令的参数，如果指令是`v-my-directive:argName`，那么`arg`就是`argName`。\n - `modifiers`：一个对象，包含指令的修饰符。\n3. `vnode`：虚拟节点，代表指令所绑定的元素的虚拟节点。\n4. `oldVnode`：上一个虚拟节点，仅在`update`和`componentUpdated`钩子中可用。\n\n**四、自定义指令的应用场景**\n\n1. 操作 DOM 元素：例如，在特定条件下为元素添加或移除类名、设置样式、监听元素的事件等。\n2. 实现复杂的交互效果：比如拖拽、缩放、滚动监听等。\n3. 数据格式化：在将数据绑定到元素之前对数据进行格式化处理。\n",{"_58":852,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/928/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/928/timeline",{"_58":855,"_60":61,"_62":856,"_64":857,"_66":858,"_68":859,"_70":860,"_72":861,"_74":862,"_76":863,"_78":864,"_111":865,"_131":132,"_133":24,"_134":-5,"_135":867,"_137":868,"_159":152,"_153":870,"_155":870,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":871,"_169":872,"_175":873,"_177":874,"_189":876,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/927","https://api.github.com/repos/pro-collection/interview-question/issues/927/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/927/comments","https://api.github.com/repos/pro-collection/interview-question/issues/927/events","https://github.com/pro-collection/interview-question/issues/927",2540642010,"I_kwDOJGDC6c6Xbx7a",927,"[Vue] 组合式函数和 vue2 mixins 对比，有何优劣【热度: 311】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[866],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":869,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T05:02:25Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：组合式函数对比 mixins\n\n在 Vue 3 中，组合式函数（Composables）与 Vue 2 中的混入（Mixins）相比，有以下优劣：\n\n**一、组合式函数的优势**\n\n1. 更好的可读性和可维护性：\n\n - 组合式函数通常是一个独立的函数，其逻辑更加清晰，容易理解和调试。每个组合式函数专注于特定的功能，使得代码结构更加模块化。\n - 相比之下，混入可能会导致命名冲突和难以追踪的代码来源，尤其是当多个混入被应用到一个组件时。\n\n2. 灵活的组合和参数化：\n\n - 可以根据需要选择和组合不同的组合式函数，并且可以传递参数来定制它们的行为。这使得代码更加灵活，可以适应不同的场景。\n - 混入的组合相对固定，难以进行灵活的参数化。\n\n3. 更好的类型支持：\n\n - 在使用 TypeScript 时，组合式函数可以更好地利用类型系统，提供更准确的类型提示和错误检查。\n - 混入在类型支持方面相对较弱，可能会导致类型不明确的问题。\n\n4. 避免命名冲突：\n - 组合式函数通过命名空间或函数名来避免命名冲突，而混入可能会因为相同的属性或方法名而产生冲突。\n\n**二、混入的优势**\n\n1. 历史兼容性：\n\n - 如果是从 Vue 2 迁移过来的项目，已经使用了混入，那么在一定程度上可以继续使用它们，减少迁移成本。\n\n2. 简单的使用方式：\n - 对于一些简单的复用场景，混入可以快速地将一些通用的属性和方法添加到组件中，使用起来相对简单。\n\n**三、组合式函数的劣势**\n\n1. 学习曲线：\n\n - 对于习惯了 Vue 2 混入的开发者来说，学习和适应组合式函数可能需要一定的时间。\n\n2. 代码组织要求高：\n - 由于组合式函数需要更加细致的代码组织，对于一些小型项目或快速开发场景，可能会觉得相对繁琐。\n\n**四、混入的劣势**\n\n1. 不明确的来源：\n\n - 当多个混入被应用到一个组件时，很难确定某个属性或方法的具体来源，这会增加代码的理解难度。\n\n2. 潜在的命名冲突：\n\n - 如前所述，混入容易产生命名冲突，尤其是在大型项目中，可能会导致难以调试的问题。\n\n3. 可维护性问题：\n - 随着项目的发展，混入可能会变得复杂和难以维护，特别是当需要修改或扩展它们的功能时。\n",{"_58":875,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/927/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/927/timeline",{"_58":878,"_60":61,"_62":879,"_64":880,"_66":881,"_68":882,"_70":883,"_72":884,"_74":885,"_76":886,"_78":887,"_111":888,"_131":132,"_133":24,"_134":-5,"_135":890,"_137":891,"_159":152,"_153":893,"_155":893,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":894,"_169":895,"_175":896,"_177":897,"_189":899,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/926","https://api.github.com/repos/pro-collection/interview-question/issues/926/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/926/comments","https://api.github.com/repos/pro-collection/interview-question/issues/926/events","https://github.com/pro-collection/interview-question/issues/926",2540641286,"I_kwDOJGDC6c6XbxwG",926,"[Vue] 如何提升复用逻辑【热度: 671】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[889],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":892,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:59:41Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 复用逻辑\n\n在 Vue 3 中，可以通过以下几种方式提升复用逻辑：\n\n**一、组合式函数（Composables）**\n\n1. 定义与使用：\n\n - 组合式函数是一个封装了可复用逻辑的函数，可以接收参数并返回响应式数据和方法。例如：\n\n ```javascript\n import { ref } from \"vue\";\n\n export function useCounter(initialValue = 0) {\n const count = ref(initialValue);\n const increment = () => count.value++;\n const decrement = () => count.value--;\n\n return { count, increment, decrement };\n }\n ```\n\n - 在组件中使用组合式函数：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 可维护性高：将可复用的逻辑封装在独立的函数中，使得代码更易于理解和维护。\n - 可测试性强：可以单独对组合式函数进行测试，而不需要依赖于整个组件。\n - 易于复用：可以在多个组件中导入和使用相同的组合式函数。\n\n**二、自定义指令**\n\n1. 定义与使用：\n\n - 自定义指令可以在元素上应用特定的行为。例如：\n\n ```javascript\n const focusDirective = {\n mounted(el) {\n el.focus();\n },\n };\n\n export default focusDirective;\n ```\n\n - 在组件中使用自定义指令：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 特定行为复用：对于一些需要在多个元素上重复应用的特定行为，可以通过自定义指令进行复用。\n - 解耦逻辑：将特定的行为从组件的逻辑中分离出来，使得组件更加专注于业务逻辑。\n\n**三、混入（Mixins）**\n\n1. 定义与使用：\n\n - 混入是一种可以将多个组件的可复用选项合并到一个对象中的方式。例如：\n\n ```javascript\n const myMixin = {\n data() {\n return {\n commonData: \"This is common data\",\n };\n },\n methods: {\n commonMethod() {\n console.log(\"This is a common method\");\n },\n },\n };\n\n export default myMixin;\n ```\n\n - 在组件中使用混入：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 代码复用：可以将一些通用的属性、方法或生命周期钩子合并到多个组件中。\n - 减少重复代码：避免在多个组件中重复编写相同的逻辑。\n\n**四、函数式组件**\n\n1. 定义与使用：\n\n - 函数式组件是一个无状态、无实例的组件，它接收 props 并返回一个 VNode。例如：\n\n ```vue\n \n ```\n\n - 在其他组件中使用函数式组件：\n\n ```vue\n \n\n \n ```\n\n2. 优势：\n - 轻量级：函数式组件没有实例化的开销，性能更高。\n - 简洁性：对于一些简单的展示性组件，可以使用函数式组件来简化代码。\n",{"_58":898,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/926/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/926/timeline",{"_58":901,"_60":61,"_62":902,"_64":903,"_66":904,"_68":905,"_70":906,"_72":907,"_74":908,"_76":909,"_78":910,"_111":911,"_131":132,"_133":24,"_134":-5,"_135":913,"_137":914,"_159":152,"_153":916,"_155":917,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":918,"_169":919,"_175":920,"_177":921,"_189":923,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/925","https://api.github.com/repos/pro-collection/interview-question/issues/925/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/925/comments","https://api.github.com/repos/pro-collection/interview-question/issues/925/events","https://github.com/pro-collection/interview-question/issues/925",2540640842,"I_kwDOJGDC6c6XbxpK",925,"[Vue] 介绍一下 Provide【热度: 633】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[912],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":915,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:57:41Z","2024-09-22T04:57:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 Provide\n\nVue 3 中的 `provide` 和 `inject` 功能提供了一种方法，允许祖先组件将数据“提供”给它的所有后代组件，无论后代组件位于组件树的何处，而不必通过所有的组件层层传递属性（props）。这对于深层嵌套的组件或跨多个组件共享状态特别有用。\n\n### 基本用法\n\n#### 在祖先组件中提供数据\n\n你可以在任何组件中使用 `provide` 选项来提供数据。`provide` 选项应该是一个对象或返回对象的函数，其中的每个属性都可以被子组件注入。从 Vue 3 开始，`provide` 和 `inject` 绑定现在是响应式的。\n\n在 Vue 3 中，建议在 `setup()` 函数中使用 `provide` 函数，因为 `setup` 是组合式 API 的入口点。\n\n```javascript\nimport { provide } from \"vue\";\n\nexport default {\n setup() {\n // 提供 'theme' 数据\n provide(\"theme\", \"dark\");\n },\n};\n```\n\n#### 在后代组件中注入数据\n\n后代组件可以使用 `inject` 选项来接收数据。`inject` 选项应该是一个字符串数组，列出需要注入的属性名。\n\n```javascript\nimport { inject } from \"vue\";\n\nexport default {\n setup() {\n const theme = inject(\"theme\");\n return { theme };\n },\n};\n```\n\n### 案例\n\n假设你正在开发一个应用，该应用有一个主题切换功能，你可以在顶层组件中提供当前主题，而所有子组件都可以注入这个主题信息，而不必通过层层传递。\n\n### 响应式提供\n\n如果要提供的数据是响应式的，并且希望后代组件能够响应数据的变化，你需要使用 Vue 的响应式系统函数，例如 `reactive` 或 `ref`。\n\n```javascript\nimport { provide, reactive } from \"vue\";\n\nexport default {\n setup() {\n const theme = reactive({ color: \"dark\" });\n provide(\"theme\", theme);\n },\n};\n```\n\n后代组件同样可以如上所示通过 `inject` 获取这个响应式的数据。\n\n### 注意事项\n\n- `provide` 和 `inject` 提供的依赖关系不是可靠的，并且不应该在业务逻辑中频繁使用，以避免复杂的跨组件通讯导致应用难以维护。它通常被用于开发可复用的插件或高阶组件。\n- 使用这两个选项时，注入的数据在后代组件中并不是响应式的，除非使用了 Vue 的响应式系统（如 `reactive`、`ref`）来提供这些数据。\n- 如果 `inject` 未找到提供的键，则它默认返回 `undefined`。你可以通过提供第二个参数作为默认值来改变这一行为。\n\n总的来说，`provide` 和 `inject` 是 Vue 3 中解决跨多个组件共享状态问题的一个非常有用的功能，尤其适用于开发高阶组件或插件时使用。\n",{"_58":922,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/925/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/925/timeline",{"_58":925,"_60":61,"_62":926,"_64":927,"_66":928,"_68":929,"_70":930,"_72":931,"_74":932,"_76":933,"_78":934,"_111":935,"_131":132,"_133":24,"_134":-5,"_135":937,"_137":938,"_159":152,"_153":940,"_155":940,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":941,"_169":942,"_175":943,"_177":944,"_189":946,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/924","https://api.github.com/repos/pro-collection/interview-question/issues/924/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/924/comments","https://api.github.com/repos/pro-collection/interview-question/issues/924/events","https://github.com/pro-collection/interview-question/issues/924",2540632949,"I_kwDOJGDC6c6Xbvt1",924,"[Vue] 介绍一下动态插槽名",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[936],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":939,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:22:41Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 动态插槽名\n\n在 Vue 3 中，动态插槽名允许在运行时根据特定的条件动态地确定插槽的名称，从而为组件的渲染提供了更大的灵活性。\n\n### **一、基本概念**\n\n通常情况下，插槽名在组件定义时是固定的。但在某些场景中，可能需要根据不同的情况动态地选择要渲染的插槽。Vue 3 引入了动态插槽名的特性，使得可以在运行时动态地确定插槽的名称。\n\n### **二、使用方法**\n\n1. 在子组件中接收动态插槽：\n\n ```vue\n \n\n \n ```\n\n 在这个子组件中，通过`ref`定义了一个名为`dynamicSlotName`的响应式变量，用于动态确定插槽的名称。\n\n2. 在父组件中使用动态插槽名：\n\n ```vue\n \n\n \n ```\n\n 在父组件中，使用`v-for`循环遍历一个包含插槽名的数组，并根据不同的插槽名渲染不同的内容。通过这种方式，可以动态地将内容传递给子组件的不同插槽。\n\n### **三、优势**\n\n1. 灵活性：可以根据不同的条件动态地选择要渲染的插槽，使得组件能够适应各种复杂的场景。\n2. 可扩展性：在需要根据不同的情况展示不同的内容时，动态插槽名提供了一种简洁而强大的方式，无需为每个可能的情况创建单独的组件。\n3. 代码复用：通过动态插槽名，可以在不同的组件中复用相同的逻辑，只需要在父组件中根据不同的需求传递不同的插槽名即可。\n",{"_58":945,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/924/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/924/timeline",{"_58":948,"_60":61,"_62":949,"_64":950,"_66":951,"_68":952,"_70":953,"_72":954,"_74":955,"_76":956,"_78":957,"_111":958,"_131":132,"_133":24,"_134":-5,"_135":960,"_137":961,"_159":152,"_153":963,"_155":964,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":965,"_169":966,"_175":967,"_177":968,"_189":970,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/923","https://api.github.com/repos/pro-collection/interview-question/issues/923/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/923/comments","https://api.github.com/repos/pro-collection/interview-question/issues/923/events","https://github.com/pro-collection/interview-question/issues/923",2540632413,"I_kwDOJGDC6c6Xbvld",923,"[Vue] 介绍一下条件插槽【热度: 100】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[959],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":210,"_68":211,"_62":212,"_70":213,"_72":214,"_74":215,"_76":216,"_122":217,"_147":962,"_149":219,"_151":152,"_131":132,"_153":220,"_155":221,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-22T04:20:32Z","2024-09-28T02:20:17Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：vue3 条件插槽\r\n\r\n可以查看官网: https://cn.vuejs.org/guide/components/slots#conditional-slots\r\n\r\n在 Vue 中，条件插槽可以通过结合使用 `$slots` 属性与 `v-if` 来实现动态地根据特定条件渲染不同的内容到插槽中。\r\n\r\n**一、基本概念**\r\n\r\n条件插槽允许在父组件向子组件传递内容时，根据一定的条件来决定渲染哪个插槽的内容。通过使用 `$slots` 属性可以访问子组件中的插槽内容，然后结合 `v-if` 进行条件判断来选择要渲染的部分。\r\n\r\n**二、使用方法**\r\n\r\n1. 在子组件中定义插槽：\r\n\r\n ```html\r\n \r\n ```\r\n\r\n 在这个子组件中，定义了两个插槽，一个名为 `conditionalSlot`，另一个名为 `defaultSlot`。通过判断 `$slots.conditionalSlot` 是否存在来决定渲染哪个插槽。\r\n\r\n2. 在父组件中使用条件插槽：\r\n ```html\r\n \r\n ```\r\n 在父组件中，根据 `someCondition` 的值来决定向子组件的插槽中传递不同的内容。当 `someCondition` 为真时，传递名为 `conditionalSlot` 的插槽内容；当 `someCondition` 为假时，传递名为 `defaultSlot` 的插槽内容。\r\n\r\n**三、优势**\r\n\r\n1. 动态性：可以根据不同的条件动态地渲染不同的内容，使组件更加灵活适应各种场景。\r\n2. 可维护性：将不同情况下的内容分别组织在不同的模板中，使得代码更加清晰易读，便于维护。\r\n3. 代码复用：通过条件插槽，可以在不同的场景下复用同一个子组件，只需要在父组件中根据不同的条件传递不同的内容即可。",{"_58":969,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/923/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/923/timeline","pagination",{"_973":974,"_166":975},"value",-21,7,"actionData","errors"]