Document

\n \n

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

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

`元素的文本内容时，就已经是更新后的新值了。\n\n综上所述，`nextTick`在 Vue 中是一个非常有用的工具，用于确保在 DOM 更新后执行特定的操作，其原理是利用 JavaScript 的事件循环机制来实现异步任务的调度。\n",{"_54":248,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/998/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/998/timeline",{"_54":251,"_56":57,"_58":252,"_60":253,"_62":254,"_64":255,"_66":256,"_68":257,"_70":258,"_72":259,"_74":260,"_107":261,"_127":128,"_129":26,"_130":-5,"_131":264,"_133":265,"_155":148,"_149":267,"_151":267,"_154":-5,"_158":159,"_160":268,"_165":-5,"_166":269,"_168":270,"_180":272,"_182":-5,"_183":-5,"_184":185},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[262,263],{"_66":222,"_68":223,"_54":224,"_113":225,"_115":226,"_117":26,"_118":227},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":266,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-18T13:42:03Z",{"_162":148,"_163":148,"_164":148},"**关键词**：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",{"_54":271,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/997/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/997/timeline",{"_54":274,"_56":57,"_58":275,"_60":276,"_62":277,"_64":278,"_66":279,"_68":280,"_70":281,"_72":282,"_74":283,"_107":284,"_127":128,"_129":26,"_130":-5,"_131":293,"_133":294,"_155":148,"_149":296,"_151":296,"_154":-5,"_158":159,"_160":297,"_165":-5,"_166":298,"_168":299,"_180":301,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/993","https://api.github.com/repos/pro-collection/interview-question/issues/993/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/993/comments","https://api.github.com/repos/pro-collection/interview-question/issues/993/events","https://github.com/pro-collection/interview-question/issues/993",2583578609,"I_kwDOJGDC6c6Z_kfx",993,"304 是什么状态码，跟哪些 header 有关【热度: 546】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[285,292],{"_66":286,"_68":287,"_54":288,"_113":289,"_115":290,"_117":26,"_118":291},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":295,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-13T02:29:40Z",{"_162":148,"_163":148,"_164":148},"**关键词**：http 状态码\n\n304 是 HTTP 状态码中的“Not Modified”（未修改）状态码。\n\n当客户端（通常是浏览器）向服务器请求资源时，如果服务器判断该资源自上次客户端获取后没有被修改，就会返回 304 状态码，告诉客户端可以使用其本地缓存的版本，而无需再次传输整个资源。\n\n304 状态码主要与以下 HTTP 响应头有关：\n\n**一、`Last-Modified` 和 `If-Modified-Since`**\n\n1. `Last-Modified`：\n\n - 服务器在首次响应资源时，在响应头中添加这个字段，表明资源的最后修改时间。\n - 例如：`Last-Modified: Thu, 12 Oct 2023 10:30:00 GMT`。\n\n2. `If-Modified-Since`：\n - 当客户端再次请求该资源时，会在请求头中添加这个字段，其值为上次服务器返回的`Last-Modified`的值。\n - 服务器收到请求后，会比较资源的最后修改时间与`If-Modified-Since`的值。如果资源自该时间后没有被修改，就返回 304 状态码。\n\n**二、`ETag` 和 `If-None-Match`**\n\n1. `ETag`：\n\n - 服务器为资源生成的一个唯一标识符，通常基于资源的内容计算得出。\n - 例如：`ETag: \"abcdef123456\"`。\n\n2. `If-None-Match`：\n - 当客户端再次请求资源时，会在请求头中添加这个字段，其值为上次服务器返回的`ETag`的值。\n - 服务器收到请求后，会比较资源当前的`ETag`与`If-None-Match`的值。如果一致，说明资源未被修改，返回 304 状态码。\n",{"_54":300,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/993/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/993/timeline",{"_54":303,"_56":57,"_58":304,"_60":305,"_62":306,"_64":307,"_66":308,"_68":309,"_70":310,"_72":311,"_74":312,"_107":313,"_127":128,"_129":26,"_130":-5,"_131":316,"_133":317,"_155":148,"_149":319,"_151":319,"_154":-5,"_158":159,"_160":320,"_165":-5,"_166":321,"_168":322,"_180":324,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/992","https://api.github.com/repos/pro-collection/interview-question/issues/992/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/992/comments","https://api.github.com/repos/pro-collection/interview-question/issues/992/events","https://github.com/pro-collection/interview-question/issues/992",2583578222,"I_kwDOJGDC6c6Z_kZu",992,"常见的 http code 4xx 都有哪些状态码【热度: 545】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[314,315],{"_66":286,"_68":287,"_54":288,"_113":289,"_115":290,"_117":26,"_118":291},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":318,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-13T02:27:56Z",{"_162":148,"_163":148,"_164":148},"**关键词**：http 状态码\n\nHTTP 状态码中 4xx 类状态码表示客户端错误。常见的 4xx 状态码有：\n\n**一、400 Bad Request（错误请求）**\n\n1. **含义**：\n\n - 服务器无法理解客户端的请求，通常是由于请求格式错误、参数错误或缺少必要的信息导致的。\n - 例如，请求的 URL 语法错误、请求体格式不正确、缺少必需的请求头等情况都可能导致这个状态码。\n\n2. **可能的原因和解决方法**：\n - 检查请求的 URL 是否正确，确保没有拼写错误或无效的路径。\n - 检查请求体的格式是否符合服务器的要求，例如 JSON 格式是否正确。\n - 确认是否提供了所有必需的请求参数和请求头。\n\n**二、401 Unauthorized（未授权）**\n\n1. **含义**：\n\n - 表示客户端请求需要身份验证，但未提供有效的身份验证信息，或者提供的身份验证信息不正确。\n - 例如，访问需要登录的资源但未提供登录凭证，或者登录凭证已过期。\n\n2. **可能的原因和解决方法**：\n - 检查是否需要提供登录凭证，如果需要，确保提供了正确的用户名和密码。\n - 如果使用了 API 密钥或令牌，确认其是否有效且正确包含在请求中。\n - 检查服务器的身份验证机制是否正确配置。\n\n**三、403 Forbidden（禁止访问）**\n\n1. **含义**：\n\n - 服务器理解请求，但拒绝执行，通常是由于客户端没有足够的权限访问请求的资源。\n - 与 401 不同，403 表示客户端已经经过身份验证，但仍然没有权限执行请求。\n\n2. **可能的原因和解决方法**：\n - 确认客户端是否具有访问请求资源的权限。这可能涉及到用户角色、权限设置等方面的问题。\n - 检查服务器的访问控制列表（ACL）是否正确配置，确保客户端的请求在允许的范围内。\n\n**四、404 Not Found（未找到）**\n\n1. **含义**：\n\n - 服务器无法找到请求的资源。这可能是由于请求的 URL 错误、资源已被删除或移动，或者服务器配置问题导致的。\n\n2. **可能的原因和解决方法**：\n - 检查请求的 URL 是否正确，确保资源的路径和名称没有错误。\n - 如果资源已被删除或移动，可能需要更新链接或进行重定向。\n - 确认服务器的配置是否正确，确保资源能够被正确地映射到相应的 URL。\n\n**五、405 Method Not Allowed（方法不被允许）**\n\n1. **含义**：\n\n - 客户端使用了不被服务器支持的 HTTP 方法来请求资源。例如，使用 PUT 方法请求一个只支持 GET 和 POST 方法的资源。\n\n2. **可能的原因和解决方法**：\n - 检查请求的方法是否正确，根据服务器的文档或 API 说明，使用正确的 HTTP 方法。\n - 如果需要使用特定的方法，确保服务器已正确配置以支持该方法。\n\n**六、408 Request Timeout（请求超时）**\n\n1. **含义**：\n\n - 客户端在规定的时间内没有发送完整的请求，或者服务器在规定的时间内没有响应客户端的请求。\n\n2. **可能的原因和解决方法**：\n - 检查网络连接是否稳定，确保客户端能够及时发送请求。\n - 如果是服务器响应超时，可能需要优化服务器的性能，减少响应时间。\n - 调整超时时间设置，根据实际情况增加客户端或服务器的超时时间。\n\n**七、429 Too Many Requests（请求过多）**\n\n1. **含义**：\n\n - 客户端在一定时间内发送了过多的请求，超出了服务器的限制。\n\n2. **可能的原因和解决方法**：\n - 遵循服务器的请求速率限制，减少请求的频率。\n - 如果可能，使用缓存或异步处理来减少对服务器的请求次数。\n - 检查是否有不必要的重复请求，可以进行优化以减少请求数量。\n",{"_54":323,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/992/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/992/timeline",{"_54":326,"_56":57,"_58":327,"_60":328,"_62":329,"_64":330,"_66":331,"_68":332,"_70":333,"_72":334,"_74":335,"_107":336,"_127":128,"_129":26,"_130":-5,"_131":345,"_133":346,"_155":148,"_149":348,"_151":348,"_154":-5,"_158":159,"_160":349,"_165":-5,"_166":350,"_168":351,"_180":353,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/960","https://api.github.com/repos/pro-collection/interview-question/issues/960/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/960/comments","https://api.github.com/repos/pro-collection/interview-question/issues/960/events","https://github.com/pro-collection/interview-question/issues/960",2569655562,"I_kwDOJGDC6c6ZKdUK",960,"浏览器中如何实现剪切板复制内容的功能【热度: 95】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[337,344],{"_66":338,"_68":339,"_54":340,"_113":341,"_115":342,"_117":26,"_118":343},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":347,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-07T07:55:14Z",{"_162":148,"_163":148,"_164":148},"**关键词**：document.execCommand('copy')、navigator.clipboard API\n\n在浏览器中，可以通过以下几种方式实现剪切板复制内容的功能：\n\n**一、使用`document.execCommand('copy')`**\n\n1. **基本用法**：\n\n - 在 JavaScript 中，可以使用`document.execCommand('copy')`方法来执行复制操作。但这个方法需要先选中页面上的一部分内容或者将内容放入一个可编辑的元素中。\n - 例如：\n\n ```html\n \n

这是要复制的内容

\n ```\n\n ```javascript\n function copyToClipboard() {\n const content = document.getElementById(\"contentToCopy\").textContent;\n const tempInput = document.createElement(\"input\");\n tempInput.value = content;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand(\"copy\");\n document.body.removeChild(tempInput);\n }\n ```\n\n - 在这个例子中，当用户点击按钮时，将获取要复制的内容，创建一个临时的``元素，将内容放入其中，选中该元素的内容，然后执行复制操作，最后移除临时元素。\n\n2. **限制和兼容性**：\n - 这种方法在一些浏览器中可能存在兼容性问题，并且需要用户交互（如点击按钮）才能触发复制操作。\n - 此外，现代浏览器对于使用`document.execCommand`的限制越来越多，因为它可能存在安全风险。\n\n**二、使用`navigator.clipboard` API**\n\n1. **异步方法**：\n\n - 现代浏览器提供了`navigator.clipboard` API，它提供了更安全和可靠的方式来访问剪切板。这个 API 主要使用异步方法来进行复制操作。\n - 例如：\n\n ```javascript\n async function copyToClipboard() {\n const content = \"这是要复制的内容\";\n try {\n await navigator.clipboard.writeText(content);\n console.log(\"内容已复制到剪切板\");\n } catch (err) {\n console.error(\"无法复制内容到剪切板：\", err);\n }\n }\n ```\n\n - 在这个例子中，使用`navigator.clipboard.writeText()`方法将指定的内容复制到剪切板。如果操作成功，控制台将打印“内容已复制到剪切板”；如果出现错误，将打印错误信息。\n\n2. **权限要求**：\n - 使用`navigator.clipboard` API 可能需要用户的明确许可，特别是在一些注重隐私的浏览器中。如果用户没有授予权限，复制操作可能会失败。\n - 可以通过在页面加载时请求用户的权限来提高复制操作的成功率。\n\n**三、结合事件处理**\n\n1. **响应用户交互**：\n\n - 可以结合用户的交互事件，如点击按钮、按下快捷键等，来触发复制操作。这样可以提供更好的用户体验。\n - 例如，可以使用`addEventListener`方法来监听按钮的点击事件：\n\n ```html\n \n ```\n\n ```javascript\n document.getElementById(\"copyButton\").addEventListener(\"click\", copyToClipboard);\n ```\n\n2. **快捷键支持**：\n - 还可以监听键盘快捷键事件，例如`Ctrl+C`（在 Windows 和 Linux 系统中）或`Command+C`（在 macOS 系统中），来模拟系统的复制操作。\n - 这需要使用`keydown`或`keyup`事件，并检查按下的键是否是复制快捷键。但这种方法可能会受到浏览器的安全限制，并且不同浏览器对快捷键的处理方式可能不同。\n\n通过以上方法，可以在浏览器中实现剪切板复制内容的功能。根据具体的需求和浏览器的兼容性，可以选择合适的方法来实现复制操作。同时，需要注意用户的隐私和安全问题，确保复制操作是在用户许可的情况下进行的。\n",{"_54":352,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/960/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/960/timeline",{"_54":355,"_56":57,"_58":356,"_60":357,"_62":358,"_64":359,"_66":360,"_68":361,"_70":362,"_72":363,"_74":364,"_107":365,"_127":128,"_129":26,"_130":-5,"_131":368,"_133":369,"_155":148,"_149":371,"_151":372,"_154":-5,"_158":159,"_160":373,"_165":-5,"_166":374,"_168":375,"_180":377,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/898","https://api.github.com/repos/pro-collection/interview-question/issues/898/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/898/comments","https://api.github.com/repos/pro-collection/interview-question/issues/898/events","https://github.com/pro-collection/interview-question/issues/898",2530133431,"I_kwDOJGDC6c6WzsW3",898,"[Vue] 3.x 中 app.config 有哪些应用配置？【热度: 200】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[366,367],{"_66":222,"_68":223,"_54":224,"_113":225,"_115":226,"_117":26,"_118":227},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":231,"_64":232,"_58":233,"_66":234,"_68":235,"_70":236,"_72":237,"_118":238,"_143":370,"_145":240,"_147":148,"_127":128,"_149":241,"_151":242,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T06:16:38Z","2024-09-17T06:16:39Z",{"_162":148,"_163":148,"_164":148},"**关键词**：app.config 配置\n\n确实，在 Vue 3 中，`app.config` 提供了一系列的应用级别的配置选项，用于自定义或调整 Vue 应用的行为。你提到的这些配置项都是 `app.config` 的一部分，下面是关于它们的详细介绍：\n\n### `app.config.errorHandler`\n\n- **作用**：为未捕获的异常定义一个全局的处理函数。这在集中处理组件渲染或观察者(watchers)中的异常时非常有用。\n- **示例**：\n\n```javascript\napp.config.errorHandler = (err, instance, info) => {\n // 处理错误\n};\n```\n\n### `app.config.warnHandler`\n\n- **作用**：为 Vue 运行时警告定义一个全局的处理函数，允许你在开发过程中自定义处理警告的方式。\n- **示例**：\n\n```javascript\napp.config.warnHandler = (msg, instance, trace) => {\n // 处理警告\n};\n```\n\n### `app.config.performance`\n\n- **作用**：开启性能追踪。在开发模式下启用，能够测量和追踪组件的初始化、编译时间等性能指标。\n- **示例**：\n\n```javascript\napp.config.performance = true;\n```\n\n### `app.config.compilerOptions`\n\n- **作用**：允许自定义编译器选项，如模板中的自定义指令等。这对于更细致地控制模板的编译过程很有帮助。\n- **示例**：\n\n```javascript\napp.config.compilerOptions = {\n // 编译器配置\n};\n```\n\n### `app.config.globalProperties`\n\n- **作用**：定义全局可用的属性。这在 Vue 2 中通过 `Vue.prototype` 实现，Vue 3 中通过 `app.config.globalProperties` 实现。\n- **示例**：\n\n```javascript\napp.config.globalProperties.$utils = {\n // 一些全局方法或属性\n};\n```\n\n### `app.config.optionMergeStrategies`\n\n- **作用**：自定义选项的合并策略。允许你为自定义选项指定如何合并父子选项。\n- **示例**：\n ```javascript\n app.config.optionMergeStrategies.myOption = (parent, child) => {\n // 合并策略\n };\n ```\n\n### `app.config.idPrefix`\n\n- **作用**：配置此应用中通过 useId() 生成的所有 ID 的前缀。由 3.5+ 版本引入。\n- **示例**：\n\n```javascript\napp.config.idPrefix = \"custom-\";\n\n// 在组件中：\nconst id1 = useId(); // 'my-app:0'\nconst id2 = useId(); // 'my-app:1'\n```\n\n### `app.config.throwUnhandledErrorInProduction`\n\n- **作用**：强制在生产模式下抛出未处理的错误。由 3.5+ 版本引入。\n\n默认情况下，在 Vue 应用中抛出但未显式处理的错误在开发和生产模式下有不同的行为：\n\n在开发模式下，错误会被抛出并可能导致应用崩溃。这是为了使错误更加突出，以便在开发过程中被注意到并修复。\n\n在生产模式下，错误只会被记录到控制台以尽量减少对最终用户的影响。然而，这可能会导致只在生产中发生的错误无法被错误监控服务捕获。\n\n通过将 app.config.throwUnhandledErrorInProduction 设置为 true，即使在生产模式下也会抛出未处理的错误。\n\n这些应用级配置选项提供了对 Vue 应用的高度控制，允许开发者根据实际需要调整 Vue 的默认行为。在使用时，建议根据项目实际情况和需求进行选择性地配置。\n",{"_54":376,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/898/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/898/timeline",{"_54":379,"_56":57,"_58":380,"_60":381,"_62":382,"_64":383,"_66":384,"_68":385,"_70":386,"_72":387,"_74":388,"_107":389,"_127":128,"_129":26,"_130":-5,"_131":392,"_133":393,"_155":148,"_149":395,"_151":396,"_154":-5,"_158":159,"_160":397,"_165":-5,"_166":398,"_168":399,"_180":401,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/897","https://api.github.com/repos/pro-collection/interview-question/issues/897/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/897/comments","https://api.github.com/repos/pro-collection/interview-question/issues/897/events","https://github.com/pro-collection/interview-question/issues/897",2530071185,"I_kwDOJGDC6c6WzdKR",897,"[Vue] 选项式 API 和组合式 API，两者有何区别，该如何取舍【热度: 322】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[390,391],{"_66":222,"_68":223,"_54":224,"_113":225,"_115":226,"_117":26,"_118":227},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":394,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T05:42:57Z","2024-09-17T05:42:58Z",{"_162":148,"_163":148,"_164":148},"**关键词**：选项式 API 和组合式 API 区别\n\n### 选项式 API (Options API)\n\n使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。\n\n```html\n\n\n\n```\n\n### 组合式 API (Composition API)\n\n通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 `\n\n\n```\n\n### 如何取舍\n\n在 Vue.js 开发中，选择使用选项式 API 或组合式 API 取决于多个因素，包括项目的规模、团队的熟悉度、组件复杂性，以及对 TypeScript 的需求。下面是一些建议，帮助你决定在特定情况下应该采用哪种 API 风格：\n\n**考虑项目规模和复杂性**\n\n- 对于**简单或中等复杂度的项目**，特别是如果你已经习惯于 Vue 2 的开发模式，选项式 API 可能更加简单直接。它提供了一个清晰的结构，将组件的不同方面（如数据、方法、计算属性等）分隔开，易于理解和上手。\n\n- 对于**大型项目或具有复杂组件逻辑的项目**，组合式 API 更能展现其优势。它能够更好地组织和复用逻辑，尤其是当你需要处理跨组件的共享逻辑时。通过使用组合式 API，可以将相关的逻辑紧密地放在一起，而不是分散在选项式 API 的各个区域。这降低了大型项目的维护难度。\n\n**考虑团队熟悉度**\n\n- 如果你的团队已经对选项式 API 比较熟悉，且没有遇到因结构导致的维护问题，那么可能没有必要强制迁移到组合式 API。但是，鼓励团队了解和探索组合式 API，以便于未来可能的迁移或混合使用。\n\n- 对于新项目或新团队，考虑从一开始就采用组合式 API，尤其是在团队成员对其感兴趣或组件逻辑预期较为复杂的情况下。这样可以从项目初期就充分利用组合式 API 的优点。\n\n**考虑对 TypeScript 的支持**\n\n- 组合式 API 对 TypeScript 的支持更友好，如果你的项目或团队打算使用 TypeScript，那么组合式 API 是更好的选择。它提供了类型推导和更清晰的类型定义，使得 TypeScript 代码更加健壮和易于维护。\n\n**考虑代码复用和逻辑抽象**\n\n- 当有大量需要跨组件复用的逻辑时，组合式 API 提供了更灵活和强大的方式来组织这些逻辑。通过自定义组合函数，可以更容易地在组件之间共享逻辑，减少代码重复。\n",{"_54":400,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/897/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/897/timeline",{"_54":403,"_56":57,"_58":404,"_60":405,"_62":406,"_64":407,"_66":408,"_68":409,"_70":410,"_72":411,"_74":412,"_107":413,"_127":128,"_129":26,"_130":-5,"_131":416,"_133":417,"_155":148,"_149":419,"_151":420,"_154":-5,"_158":159,"_160":421,"_165":-5,"_166":422,"_168":423,"_180":425,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/893","https://api.github.com/repos/pro-collection/interview-question/issues/893/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/893/comments","https://api.github.com/repos/pro-collection/interview-question/issues/893/events","https://github.com/pro-collection/interview-question/issues/893",2529877298,"I_kwDOJGDC6c6Wyt0y",893,"http 常见的几个重定向 code 是多少，区别是啥【热度: 172】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[414,415],{"_66":286,"_68":287,"_54":288,"_113":289,"_115":290,"_117":26,"_118":291},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":418,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T03:01:27Z","2024-09-17T03:01:28Z",{"_162":148,"_163":148,"_164":148},"**关键词**：http 重定向 code\n\nHTTP 重定向是指当客户端访问一个页面时，服务器返回一个重定向状态码，告诉客户端去访问另一个 URL。常见的 HTTP 重定向状态码有以下几种，每个状态码都有其特定的意义和使用场景：\n\n### 1. **301 Moved Permanently（永久移动）**\n\n- **含义**：请求的资源已被永久移动到新位置，未来任何对此资源的引用都应使用返回的新 URI。\n- **使用场景**：当你永久性地更改了网页的 URL 地址，比如网站改版后结构变化导致 URL 变更。\n\n### 2. **302 Found（临时移动）/ 307 Temporary Redirect**\n\n- **含义（302）**：请求的资源临时移到了新的 URI 下，客户端应继续使用原有 URI。\n- **含义（307）**：与 302 类似，资源临时从不同的 URI 访问，但保证请求方法（如 POST）不变，307 在 HTTP/1.1 中引入，以明确分清与 302 的本意不同。\n- **使用场景**：当资源或页面需要临时性地从不同的 URI 访问时使用，且期望方法和消息主体不改变（特别适用 307）。\n\n### 3. **303 See Other（查看其他位置）**\n\n- **含义**：这个状态码用于重定向，目的是让客户端访问新 URI 并使用 GET 方法获取资源，无论原始请求是什么方法。\n- **使用场景**：通常用于处理表单提交后的重定向，以避免刷新页面时重复提交表单。\n\n### 4. **308 Permanent Redirect（永久重定向）**\n\n- **含义**：类似于 301，但它禁止改变请求的方法。因此，例如，应用在一个 POST 请求上时，接下来的请求仍然是一个 POST 请求。\n- **使用场景**：对于需要保留相同 HTTP 方法（如 POST）情况下的永久重定向。\n\n### 区分 301/302 与 307/308\n\n- **301 和 308**：这两个状态码表示资源已被永久移动。区别在于 308 要求后续请求使用与原始请求相同的方法。\n- **302 和 307**：这两个状态码表示资源临时移动。区别在于 307 明确规定客户端后续请求应使用与原始请求相同的方法，而 302 没有这样的强制规定，但在实际使用中客户端一般会将 POST 请求改变为 GET 请求，从而在一些情况下可能与预期不符。\n",{"_54":424,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/893/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/893/timeline",{"_54":427,"_56":57,"_58":428,"_60":429,"_62":430,"_64":431,"_66":432,"_68":433,"_70":434,"_72":435,"_74":436,"_107":437,"_127":128,"_129":26,"_130":-5,"_131":440,"_133":441,"_155":148,"_149":443,"_151":443,"_154":-5,"_158":159,"_160":444,"_165":-5,"_166":445,"_168":446,"_180":448,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/892","https://api.github.com/repos/pro-collection/interview-question/issues/892/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/892/comments","https://api.github.com/repos/pro-collection/interview-question/issues/892/events","https://github.com/pro-collection/interview-question/issues/892",2529873699,"I_kwDOJGDC6c6Wys8j",892,"http 的请求和响应都有哪些传输数据格式【热度: 149】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[438,439],{"_66":286,"_68":287,"_54":288,"_113":289,"_115":290,"_117":26,"_118":291},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":442,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-17T02:57:39Z",{"_162":148,"_163":148,"_164":148},"**关键词**：http 传输格式\n\nHTTP（超文本传输协议）是一种用于传输超媒体文档（如 HTML）的应用层协议。在 HTTP 请求和响应中，可以传输多种数据格式。这些数据格式主要通过 HTTP 头部中的`Content-Type`字段来指定。下面是一些常见的 HTTP 传输数据格式：\n\n### 1. 文本格式\n\n- **`text/plain`**：纯文本格式，不包含任何格式化。\n- **`text/html`**：HTML 格式，用于网页。\n- **`text/css`**：层叠样式表（CSS）格式，用于样式信息。\n- **`text/javascript`**（或`application/javascript`）：JavaScript 代码。\n\n### 2. 应用格式\n\n- **`application/json`**：JSON（JavaScript Object Notation）格式，常用于 Web 应用中的数据交换。\n- **`application/xml`**：XML（可扩展标记语言）格式，类似于 HTML 但更加通用，也用于数据交换。\n- **`application/x-www-form-urlencoded`**：这是 HTML 表单提交时最常用的编码格式，键值对都被编码为键=值对，并且使用`&`字符分隔。\n- **`application/form-data`**：常用于文件上传。在表单数据被编码为一系列键值对时使用，每对键值对都表示为一个表单部分。\n- **`application/octet-stream`**：任意的二进制数据。通常用于下载或上传文件。\n\n### 3. 图像格式\n\n- **`image/png`**：PNG 图像格式。\n- **`image/jpeg`**：JPEG 图像格式。\n- **`image/gif`**：GIF 图像格式。\n- **`image/webp`**：WebP 图像格式，提供了比 JPEG 更好的压缩。\n\n### 4. 音视频格式\n\n- **`audio/mpeg`**：MP3 音频格式。\n- **`audio/ogg`**：Ogg 音频格式。\n- **`video/mp4`**：MP4 视频格式。\n- **`video/webm`**：WebM 视频格式，提供高质量的视频压缩。\n\n### 5. 字体格式\n\n- **`font/woff`**：Web 开放字体格式。\n- **`font/woff2`**：Web 开放字体格式的第二版，较 WOFF 更加高效。\n",{"_54":447,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/892/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/892/timeline",{"_54":450,"_56":57,"_58":451,"_60":452,"_62":453,"_64":454,"_66":455,"_68":456,"_70":457,"_72":458,"_74":459,"_107":460,"_127":128,"_129":26,"_130":-5,"_131":469,"_133":470,"_155":148,"_149":472,"_151":472,"_154":-5,"_158":159,"_160":473,"_165":-5,"_166":474,"_168":475,"_180":477,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/884","https://api.github.com/repos/pro-collection/interview-question/issues/884/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/884/comments","https://api.github.com/repos/pro-collection/interview-question/issues/884/events","https://github.com/pro-collection/interview-question/issues/884",2526782998,"I_kwDOJGDC6c6Wm6YW",884,"介绍一下 position sticky【热度: 826】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[461,468],{"_66":462,"_68":463,"_54":464,"_113":465,"_115":466,"_117":26,"_118":467},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":471,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-15T07:30:34Z",{"_162":148,"_163":148,"_164":148},"**关键词**：position sticky\n\n`position: sticky;` 是 CSS 中的一个定位属性值，它允许元素在页面滚动到某个阈值时“固定”在位置上，而在达到这个阈值之前，元素会像正常文档流中的元素一样表现（也就是说，在特定条件下它表现得像 `position: relative;`，在另一些条件下表现得像 `position: fixed;`）。这种特性使 `sticky` 定位成为实现网页上吸顶或吸底效果的一种非常实用的手段。\n\n### 特性\n\n- **吸顶效果**：最常见的用途之一是导航栏吸顶。当用户向下滚动页面时，导航栏到达视口顶部后就会固定在那里，直到用户向上滚动至原始位置。\n- **滚动容器**：`sticky` 元素将相对于离其最近的拥有滚动机制（例如，`overflow: auto;` 或 `overflow: scroll;`）的祖先元素进行定位。\n\n### 如何使用\n\n要使元素具有 `sticky` 定位，你需要为它指定 `position: sticky;` 以及至少一个“边缘”属性（`top`, `right`, `bottom`, `left`）的值。这个值决定了元素在满足“粘性”条件前与边缘的距离。\n\n### 示例\n\n```css\n.sticky-element {\n position: -webkit-sticky; /* Safari */\n position: sticky;\n top: 0; /* 距离顶部 0px 时生效 */\n z-index: 1000; /* 确保在其他内容之上 */\n background-color: white; /* 可选：为了视觉效果更明显 */\n}\n\n.container {\n overflow-y: auto; /* 确保是滚动容器 */\n height: 500px; /* 举例，根据实际需求设置 */\n}\n```\n\n```html\n

我在滚动时会吸顶

\n \n

\n```\n\n### 注意事项\n\n- **兼容性**：`position: sticky;` 在大多数现代浏览器上都得到了支持，但在一些旧版浏览器中可能需要使用前缀或不被支持。\n- **父元素的 `overflow`**: 如果一个元素的任何父元素具有 `overflow: hidden`、`overflow: scroll` 或 `overflow: auto` 样式，则 `position: sticky` 可能不会生效。\n- **祖先的 `display`**: 某些 `display` 值（如 `display: table-cell` 等）也可能影响 `position: sticky` 的行为。\n- **使用时机**：虽然 `sticky` 提供了一种便捷的方式来实现吸附效果，但在一些复杂的布局中，可能需要额外的样式调整或脚本支持来达到预期的效果。\n\n通过灵活运用 `position: sticky;`，可以在无需 JavaScript 的情况下，实现许多响应用户滚动的交互效果。\n",{"_54":476,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/884/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/884/timeline",{"_54":479,"_56":57,"_58":480,"_60":481,"_62":482,"_64":483,"_66":484,"_68":485,"_70":486,"_72":487,"_74":488,"_107":489,"_127":128,"_129":26,"_130":-5,"_131":492,"_133":493,"_155":148,"_149":495,"_151":495,"_154":-5,"_158":159,"_160":496,"_165":-5,"_166":497,"_168":498,"_180":500,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/880","https://api.github.com/repos/pro-collection/interview-question/issues/880/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/880/comments","https://api.github.com/repos/pro-collection/interview-question/issues/880/events","https://github.com/pro-collection/interview-question/issues/880",2526779904,"I_kwDOJGDC6c6Wm5oA",880,"需要详细记录多个操作链路的性能耗时，进行结构化场景分析，该如何做【热度: 378】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[490,491],{"_66":338,"_68":339,"_54":340,"_113":341,"_115":342,"_117":26,"_118":343},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":231,"_64":232,"_58":233,"_66":234,"_68":235,"_70":236,"_72":237,"_118":238,"_143":494,"_145":240,"_147":148,"_127":128,"_149":241,"_151":242,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-15T07:20:30Z",{"_162":148,"_163":148,"_164":148},"**关键词**：操作链路耗时分析\n\n> 作者笔记\n> 该问题，主要是考察两个问题，怎么定操作节点指标，怎么去捕获每个阶段时间的耗时\n\n### 操作节点指标\n\n首先对一个操作链路切片：比如一个操作流程，分拆为第一步，第二步，第三步....... \n然后对每一步一个事件点。 \n然后统计每一个时间点之间的时间差，就可以得出用户早操作每一步操作停留的时间。\n\n甚至可以统计一个串行流程，实际上是一样的。\n\n### 阶段耗时统计\n\n**推荐： `performance.mark()`**\n\n`performance.mark()` 是 Web Performance API 的一部分，它允许你在浏览器的性能条目缓冲区中创建一个具有特定名称的时间戳（也就是一个\"标记\"）。这些标记可用于精确测量页面或应用中的特定流程、操作、或某段代码的执行时间。通过使用`performance.mark()`来标记关键的代码执行点，你可以准确地测量出这些点之间的耗时，从而评估性能和识别瓶颈。\n\n#### 如何使用 `performance.mark()`\n\n**创建标记**\n\n要使用`performance.mark()`，直接调用此函数并传入一个字符串作为标记的名称即可：\n\n```javascript\nperformance.mark(\"startLoad\");\n// 执行一些操作\nperformance.mark(\"endLoad\");\n```\n\n在上述示例中，`startLoad`和`endLoad`是两个标记点，分别表示加载操作的开始和结束。\n\n**测量两个标记间的耗时**\n\n创建标记后，你可以使用`performance.measure()`方法来测量这两个标记点之间的耗时。`performance.measure()`方法同样需要一个名称，并且可以接受两个额外的参数：起始标记和结束标记的名称。\n\n```javascript\nperformance.measure(\"loadDuration\", \"startLoad\", \"endLoad\");\n```\n\n在上面的代码中，`loadDuration`是测量的名称，表示从`startLoad`到`endLoad`之间的耗时。\n\n**获取和分析测量结果**\n\n通过`performance.getEntriesByName()`或其他类似的 API，你可以获取到性能条目并分析结果：\n\n```javascript\nconst measure = performance.getEntriesByName(\"loadDuration\")[0];\nconsole.log(`加载耗时：${measure.duration}毫秒`);\n```\n\n`performance.getEntriesByName('loadDuration')`会返回一个数组，其中包含所有名为`loadDuration`的性能条目。在这个例子中，我们取数组的第一个元素，并通过`duration`属性获取实际的测量时间。\n\n#### 清理标记和测量\n\n为了避免性能条目缓冲区满了或是数据混乱，你可以在完成测量和分析后，使用`performance.clearMarks()`和`performance.clearMeasures()`来清除标记和测量结果。\n\n```javascript\nperformance.clearMarks(\"startLoad\");\nperformance.clearMarks(\"endLoad\");\nperformance.clearMeasures(\"loadDuration\");\n```\n\n#### 使用场景\n\n`performance.mark()`非常适合用于测量页面加载、脚本执行、用户交互处理或任何自定义流程的性能。通过准确地标记和测量这些操作的起始和结束时间，开发者可以识别出性能瓶颈和潜在的优化点，从而改进应用的性能表现。\n\n#### 注意事项\n\n- 并非所有浏览器都支持 Web Performance API 的全部特性。使用这些 API 之前，建议检查兼容性。\n- 对于高频率的性能标记和测量，要注意性能条目缓冲区可能会被快速填满，从而影响数据的收集和分析。确保适时清理不再需要的性能条目。\n",{"_54":499,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/880/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/880/timeline",{"_54":502,"_56":57,"_58":503,"_60":504,"_62":505,"_64":506,"_66":507,"_68":508,"_70":509,"_72":510,"_74":511,"_107":512,"_127":128,"_129":26,"_130":-5,"_131":515,"_133":516,"_155":185,"_149":518,"_151":519,"_154":-5,"_158":159,"_160":520,"_165":-5,"_166":521,"_168":522,"_180":524,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/878","https://api.github.com/repos/pro-collection/interview-question/issues/878/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/878/comments","https://api.github.com/repos/pro-collection/interview-question/issues/878/events","https://github.com/pro-collection/interview-question/issues/878",2526775152,"I_kwDOJGDC6c6Wm4dw",878,"长文本场景，中间显示省略号..., 两端正常展示【热度: 351】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[513,514],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":517,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-15T07:06:11Z","2024-12-14T10:25:12Z",{"_162":148,"_163":148,"_164":148},"**关键词**：长文本隐藏\n\n在前端处理长文本且需要在中间显示省略号（...），两端保留完整文本的情况，通常有下面几种方法可以达到效果：\n\n### 1. 纯 CSS 解决方案（对于单行文本）\n\n对于单行的文本，可以使用 CSS 的`text-overflow`属性来实现，但这种方法一般只能实现末尾的省略号，无法直接实现中间省略的效果。\n\n### 2. JavaScript + CSS\n\n当需要在文本中间显示省略号时，就需要结合使用 JavaScript 和 CSS 来处理。以下是一种可能的实现方法：\n\n1. **确定保留文本的长度。** 首先确定需要在文本的开始和结束保留多少字符。\n2. **使用 JavaScript 计算并处理文本。** 根据上面确定的长度，使用 JavaScript 截取字符串，并添加省略号。\n3. **使用 CSS 来保证文本的美观展示。**\n\n下面是一个简单的示例代码：\n\n```html\n\n\n \n \n \n Document\n \n \n \n

\n \n

\n\n \n \n\n```\n\n在这个例子中，`truncateText`函数接收一个选择器（在这里是指容器的 ID）、要处理的文本、前端和后端应保留文本的长度。函数计算并生成了新的文本内容，其中间部分被省略号（...）替代。\n\n这个方法给予了你灵活性去确定前后端保留的文本长度，以及省略的部分。但需要注意，这是针对简单场景的解决方案，对于更复杂的布局或特殊字体，可能需要更细致的处理来保证良好的显示效果。\n\n### 其他复杂实现可以参考下面的文档\n\n- https://juejin.cn/post/7329967013923962895\n",{"_54":523,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/878/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/878/timeline",{"_54":526,"_56":57,"_58":527,"_60":528,"_62":529,"_64":530,"_66":531,"_68":532,"_70":533,"_72":534,"_74":535,"_107":536,"_127":128,"_129":26,"_130":-5,"_131":539,"_133":540,"_155":148,"_149":542,"_151":543,"_154":-5,"_158":159,"_160":544,"_165":-5,"_166":545,"_168":546,"_180":548,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/867","https://api.github.com/repos/pro-collection/interview-question/issues/867/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/867/comments","https://api.github.com/repos/pro-collection/interview-question/issues/867/events","https://github.com/pro-collection/interview-question/issues/867",2498572415,"I_kwDOJGDC6c6U7TB_",867,"要实时统计用户浏览器窗口大小，该如何做【热度: 210】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[537,538],{"_66":338,"_68":339,"_54":340,"_113":341,"_115":342,"_117":26,"_118":343},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":541,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-31T02:54:46Z","2024-08-31T02:54:47Z",{"_162":148,"_163":148,"_164":148},"**关键词**：resize 事件应用\n\n要实时统计用户浏览器窗口大小，可以利用 JavaScript 中的 `resize` 事件。当浏览器窗口尺寸变化时，此事件会被触发。通过侦听此事件，可以实时获取并处理浏览器窗口的宽度和高度。\n\n### 基础示例\n\n下面是一个简单的示例，展示如何使用 `resize` 事件来获取并打印当前浏览器窗口的宽度和高度：\n\n```javascript\n// 定义一个函数来处理窗口大小变化\nfunction handleResize() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n console.log(`当前窗口大小：宽度 = ${width}, 高度 = ${height}`);\n}\n\n// 在窗口 resize 事件上添加监听器\nwindow.addEventListener(\"resize\", handleResize);\n\n// 初始化时执行一次，确保获取初始窗口大小\nhandleResize();\n```\n\n### 节流优化\n\n如果你担心 `resize` 事件触发得太频繁，可能会影响页面性能，可以引入“节流”（throttle）机制来限制事件处理函数的执行频率。节流确保了即使事件持续触发，事件处理函数也只在每隔一段时间执行一次。\n\n以下是如何应用节流优化的示例：\n\n```javascript\nfunction throttle(fn, wait) {\n let inThrottle, lastFn, lastTime;\n return function () {\n const context = this,\n args = arguments;\n if (!inThrottle) {\n fn.apply(context, args);\n lastTime = Date.now();\n inThrottle = true;\n } else {\n clearTimeout(lastFn);\n lastFn = setTimeout(function () {\n if (Date.now() - lastTime >= wait) {\n fn.apply(context, args);\n lastTime = Date.now();\n }\n }, Math.max(wait - (Date.now() - lastTime), 0));\n }\n };\n}\n\n// 使用节流函数包装我们的处理器\nconst throttledHandleResize = throttle(handleResize, 100);\n\n// 添加节流化的事件监听\nwindow.addEventListener(\"resize\", throttledHandleResize);\n```\n\n这个 `throttle` 函数通过确保被包装的 `handleResize` 函数在指定的时间间隔（本例中为 100 毫秒）内最多只执行一次，来减少 `resize` 事件处理函数的调用频率。\n\n### 应用场景\n\n这样实时统计用户浏览器窗口大小的方法可以用于多种应用场景，如响应式布局调整、基于窗口大小动态加载资源、或者其他需要根据视窗大小变化进行调整的交互效果实现。\n\n使用这种方法时，重要的是平衡事件处理函数的执行频率和页面的性能，特别是当你的窗口大小调整处理函数中包含复杂操作时。通过合理利用“节流”或“防抖”（debounce）技术，可以有效地解决这个问题。\n",{"_54":547,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/867/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/867/timeline",{"_54":550,"_56":57,"_58":551,"_60":552,"_62":553,"_64":554,"_66":555,"_68":556,"_70":557,"_72":558,"_74":559,"_107":560,"_127":128,"_129":26,"_130":-5,"_131":563,"_133":564,"_155":148,"_149":566,"_151":567,"_154":-5,"_158":159,"_160":568,"_165":-5,"_166":569,"_168":570,"_180":572,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/866","https://api.github.com/repos/pro-collection/interview-question/issues/866/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/866/comments","https://api.github.com/repos/pro-collection/interview-question/issues/866/events","https://github.com/pro-collection/interview-question/issues/866",2498571746,"I_kwDOJGDC6c6U7S3i",866,"ResizeObserver 作用是什么【热度: 416】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[561,562],{"_66":338,"_68":339,"_54":340,"_113":341,"_115":342,"_117":26,"_118":343},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":565,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-31T02:52:16Z","2024-08-31T02:52:17Z",{"_162":148,"_163":148,"_164":148},"**关键词**：ResizeObserver api\n\n`ResizeObserver` 的作用是监测元素的尺寸变化。这是一种强大的 Web API，允许开发者在元素的尺寸发生改变时（无论是因为元素内容的变化、窗口大小的调整还是其他原因导致的尺寸改变），执行一些操作或布局更新。在过去，开发者通常需要依赖定时器或者窗口的 `resize` 事件来间接监测元素尺寸的变化，这种方法不仅不够精确，而且效率低下。`ResizeObserver` 提供了一种更为直接和高效的方式来响应尺寸变化。\n\n### 如何使用 `ResizeObserver`\n\n使用 `ResizeObserver` 很简单，你只需要创建一个 `ResizeObserver` 实例，并为它提供一个回调函数。在回调函数中，你可以基于元素尺寸的变化来执行相应的操作。然后，使用 `observe` 方法来指定需要被观察尺寸变化的元素。\n\n### 示例代码\n\n下面的示例代码展示了如何使用 `ResizeObserver` 来监测一个元素的尺寸变化，并在尺寸变化时输出新的尺寸信息：\n\n```javascript\n// 监测的目标元素\nconst targetElement = document.querySelector(\".resizable\");\n\n// 创建 ResizeObserver 实例\nconst resizeObserver = new ResizeObserver((entries) => {\n for (let entry of entries) {\n // entry.target 是被观察的元素\n // entry.contentRect 包含了元素的尺寸信息\n console.log(\"Element size changed:\", entry.target);\n console.log(`New width: ${entry.contentRect.width}`);\n console.log(`New height: ${entry.contentRect.height}`);\n }\n});\n\n// 开始观察目标元素\nresizeObserver.observe(targetElement);\n```\n\n### 应用场景\n\n`ResizeObserver` 的常见应用场景包括：\n\n- **响应式布局**：当容器的尺寸改变时，动态调整内容或布局，提供更好的响应式设计。\n- **图表和可视化**：在图表或数据可视化的容器大小改变时，重新绘制图表来适应新的尺寸。\n- **动态元素（如弹出窗口和下拉菜单）**：监测并根据内容大小自动调整元素的尺寸。\n",{"_54":571,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/866/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/866/timeline",{"_54":574,"_56":57,"_58":575,"_60":576,"_62":577,"_64":578,"_66":579,"_68":580,"_70":581,"_72":582,"_74":583,"_107":584,"_127":128,"_129":26,"_130":-5,"_131":587,"_133":588,"_155":148,"_149":590,"_151":591,"_154":-5,"_158":159,"_160":592,"_165":-5,"_166":593,"_168":594,"_180":596,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/844","https://api.github.com/repos/pro-collection/interview-question/issues/844/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/844/comments","https://api.github.com/repos/pro-collection/interview-question/issues/844/events","https://github.com/pro-collection/interview-question/issues/844",2478185578,"I_kwDOJGDC6c6Tthxq",844,"JS 数据类型里面， Set 和数组分别有哪些适用场景，开发中该如何抉择【热度: 333】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[585,586],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":589,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-21T14:27:22Z","2024-08-21T14:27:23Z",{"_162":148,"_163":148,"_164":148},"**关键词**：Set 和数组适用场景\n\n在 JavaScript 中，`Set`和数组（`Array`）都是用来存储一系列数据的集合，但它们具有不同的特性和适用场景。了解这些差异可以帮助你在特定情况下做出更合适的选择。\n\n### Set\n\n**特性**：\n\n- `Set`是一种新的数据结构，被引入在 ES6 中。\n- 它类似于数组，但是成员的值都是唯一的，没有重复的值。\n- 提供了简单的方法来进行添加(`add`)、删除(`delete`)、检查(`has`)成员，以及获取集合大小(`size`)。\n- 不支持索引访问（例如，`set[0]`是不可能的），因此不适于通过索引获取或操作元素的场景。\n- 对集合元素的迭代相对简单，有`values()`、`keys()`（与`values()`相同）和`entries()`方法，以及`forEach`方法。\n\n**适用场景**：\n\n- 当你需要存储唯一值的集合时，比如集合、标签、关键字等。\n- 当你需要高效地进行存在性检查（是否包含某个元素）时。\n- 当你不需要元素的索引和顺序访问，或者添加和删除操作比查找和访问操作更频繁时。\n\n### Array\n\n**特性**：\n\n- 数组是 JavaScript 中最基本的数据结构之一。\n- 数组中的元素可以通过索引进行访问，提供了广泛的方法来进行遍历、映射（`map`）、过滤（`filter`）、归并（`reduce`）等操作。\n- 数组中可以包含重复的值。\n- 数组的长度是可变的，可以通过`push`、`pop`等方法动态地添加或移除元素。\n\n**适用场景**：\n\n- 当你需要通过索引访问元素时，数组提供了方便的方法。\n- 当集合中允许存在重复的元素时。\n- 当你需要使用一系列数组特有的方法操作数据时，比如`map`、`filter`、`reduce`等。\n- 当你需要对数据进行排序，或需要保持元素的添加顺序时。\n\n### 抉择\n\n选择`Set`还是数组主要取决于你的具体应用场景：\n\n- **唯一性**：如果你需要确保一个集合中元素的唯一性，那么`Set`是一个更好的选择。\n- **查找和删除**：如果你需要高效的查找和删除操作，而且元素的唯一性很重要，`Set`提供更优的性能。\n- **索引访问和顺序**：如果你需要通过索引来频繁访问或更新元素，或者需要对元素进行排序，那么数组会是更合适的选择。\n- **数据处理**：如果你需要对集合进行复杂的数据处理，比如映射、过滤、归并等操作，数组提供了丰富的方法来支持这些。\n\n在设计你的应用或功能时，考虑数据结构的这些特性和适用场景，可以帮助你作出更合适、更高效的决策。\n",{"_54":595,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/844/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/844/timeline",{"_54":598,"_56":57,"_58":599,"_60":600,"_62":601,"_64":602,"_66":603,"_68":604,"_70":605,"_72":606,"_74":607,"_107":608,"_127":128,"_129":26,"_130":-5,"_131":617,"_133":618,"_155":148,"_149":620,"_151":621,"_154":-5,"_158":159,"_160":622,"_165":-5,"_166":623,"_168":624,"_180":626,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/838","https://api.github.com/repos/pro-collection/interview-question/issues/838/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/838/comments","https://api.github.com/repos/pro-collection/interview-question/issues/838/events","https://github.com/pro-collection/interview-question/issues/838",2471815945,"I_kwDOJGDC6c6TVOsJ",838,"[webpack] 手写 webpack plugin 有那些重要 api 与注意的地方？【热度: 714】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[609,616],{"_66":610,"_68":611,"_54":612,"_113":613,"_115":614,"_117":26,"_118":615},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":231,"_64":232,"_58":233,"_66":234,"_68":235,"_70":236,"_72":237,"_118":238,"_143":619,"_145":240,"_147":148,"_127":128,"_149":241,"_151":242,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-18T06:31:33Z","2024-08-18T06:37:05Z",{"_162":148,"_163":148,"_164":148},"**关键词**：手写 webpack plugin\n\n在手写一个 webpack 插件时，理解和使用一些核心的 API 是非常关键的。以下是编写 webpack 插件时需要知道的一些重要的 API 和注意事项。\n\n### 重要的 API\n\n1. **compiler 对象**:\n\n - `compiler.hooks`: 提供了一系列的钩子，用于插件挂载到 webpack 的整个编译过程。这些钩子包括：\n - `compile`、`compilation`：允许你在编译器开始编译以及创建新的编译对象时挂载功能。\n - `emit`、`done`：这些阶段更适合于生成资源、修改输出和记录状态。\n\n2. **compilation 对象**:\n\n - 同样提供了一系列钩子，它们以更细粒度控制编译阶段，比如：\n - `optimize`、`optimizeModules`：用于优化阶段。\n - `buildModule`：在构建模块时触发。\n - `moduleAssets`：处理模块产出的资源。\n\n3. **tapable**:\n - webpack 依赖于 tapable 库来实现钩子系统。使用 `tap()` 或 `tapAsync()` 方法来挂载这些钩子。这些方法通常接受两个参数：插件名称和一个回调函数。\n\n### 注意的地方\n\n1. **异步操作**:\n - 如果你的插件中涉及异步操作，确保正确处理。如果使用异步钩子，可以使用 `tapAsync()` 方法，它提供了一个回调函数来告知 webpack 何时异步操作完成。\n2. **资源操作**:\n\n - 当操作 compilation 中的资源时，务必小心。确保不要删除或覆盖 webpack 或其他插件所需的关键资源。\n\n3. **性能考虑**:\n - 插件的性能影响编译时长。避免在插件中执行过重的操作，尤其是在像 `compiler` 或 `compilation` 这样的生命周期钩子中，它们会影响到整个编译过程。\n4. **webpack 版本兼容性**:\n\n - webpack 的 API 在不同版本间可能会有变动。编写插件时，需要注意兼容性，并明确指出插件支持的 webpack 版本范围。\n\n5. **钩子选择**:\n - 精确选择最适合的钩子对性能和功能都至关重要。了解每个钩子的含义和最佳用途能帮助插件更高效地工作。\n\n### 示例\n\n以下是一个简单的 webpack 插件示例，展示了如何使用上述 API：\n\n```javascript\nclass MyWebpackPlugin {\n apply(compiler) {\n // 监听 emit 钩子\n compiler.hooks.emit.tapAsync(\"MyWebpackPlugin\", (compilation, callback) => {\n // 在这里可以处理 compilation 中的资源、模块等\n console.log(\"This is an example webpack plugin!\");\n\n // 完成插件处理后调用 callback 通知 webpack\n callback();\n });\n }\n}\n```\n\n这个简单的插件打印一条消息，在 `emit` 阶段被触发。尽管这个示例很基础，但是它展示了插件的基本结构和一些重要的 API。记得在编写更复杂的插件时阅读并理解 webpack 的文档，以利用 webpack 提供的完整能力。\n",{"_54":625,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/838/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/838/timeline",{"_54":628,"_56":57,"_58":629,"_60":630,"_62":631,"_64":632,"_66":633,"_68":634,"_70":635,"_72":636,"_74":637,"_107":638,"_127":128,"_129":26,"_130":-5,"_131":641,"_133":642,"_155":148,"_149":644,"_151":645,"_154":-5,"_158":159,"_160":646,"_165":-5,"_166":647,"_168":648,"_180":650,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/837","https://api.github.com/repos/pro-collection/interview-question/issues/837/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/837/comments","https://api.github.com/repos/pro-collection/interview-question/issues/837/events","https://github.com/pro-collection/interview-question/issues/837",2471814773,"I_kwDOJGDC6c6TVOZ1",837,"[webpack] 手写一个 plugin, 统计源码里面的 console.log 调用数量与调用路径【热度: 113】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[639,640],{"_66":610,"_68":611,"_54":612,"_113":613,"_115":614,"_117":26,"_118":615},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":231,"_64":232,"_58":233,"_66":234,"_68":235,"_70":236,"_72":237,"_118":238,"_143":643,"_145":240,"_147":148,"_127":128,"_149":241,"_151":242,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-18T06:28:25Z","2024-08-18T06:31:21Z",{"_162":148,"_163":148,"_164":148},"**关键词**：手写 webpack plugin\n\n创建一个 webpack 插件需要遵循 webpack 插件的基本结构和原则，同时为了实现统计源码里的 `console.log` 调用数量与调用路径的目标，我们可能需要对 webpack 的编译过程有一定的了解，尤其是如何操作 webpack 的模块系统内部的原始源代码。\n\n以下是创建这样一个插件的步骤与代码示例：\n\n### 步骤 1: 定义插件类\n\n首先，你需要定义一个 JavaScript 类。在类的 `apply` 方法中，你将会监听 webpack 的 `compilation` 钩子来访问并处理模块的源代码。\n\n### 步骤 2: 监听适当的 webpack 钩子\n\n针对源代码的处理，我们选择监听 `compilation` 阶段的 `optimizeModules` 钩子。在这个阶段，模块的原始源代码可以被访问和修改。\n\n### 步骤 3: 处理源代码\n\n处理每个模块的源代码，你可以使用简单的正则表达式或更高级的方法（如 AST 解析）来识别 `console.log` 的调用。在这个示例中，我将使用正则表达式来简化处理流程。\n\n### 代码示例\n\n下面是一个插件的基本实现：\n\n```javascript\nclass ConsoleLogStatsPlugin {\n apply(compiler) {\n compiler.hooks.compilation.tap(\"ConsoleLogStatsPlugin\", (compilation) => {\n compilation.moduleTemplates.javascript.hooks.render.tap(\"ConsoleLogStatsPlugin\", (moduleSource, module) => {\n // 计算当前模块的 console.log 调用并记录文件路径\n const source = moduleSource.source();\n const consoleLogMatches = source.match(/console\\.log\\(/g) || [];\n\n if (consoleLogMatches.length > 0) {\n console.log(`模块 ${module.resource} 包含 ${consoleLogMatches.length} 次 console.log 调用。`);\n }\n\n return moduleSource;\n });\n });\n }\n}\n\nmodule.exports = ConsoleLogStatsPlugin;\n```\n\n### 使用该插件\n\n要在你的 webpack 配置中使用这个插件，首先要导入它，然后将它的一个实例添加到配置的 `plugins` 数组中：\n\n```javascript\nconst ConsoleLogStatsPlugin = require(\"./path/to/ConsoleLogStatsPlugin\");\n\nmodule.exports = {\n // ...其他配置...\n plugins: [\n new ConsoleLogStatsPlugin(),\n // ...其他插件...\n ],\n};\n```\n\n### 注意事项\n\n- **性能考虑**：直接操作源码可能对构建性能有一定影响。如果项目较大，可能需要考虑更高效的方式，例如仅在生产构建中运行该插件，或者使用更高效的代码分析方法。\n- **正则表达式的局限性**：简单的正则表达式可能无法准确匹配所有 `console.log` 调用的场景，尤其是当代码中包含多行语句或复杂表达式时。更复杂的场景可能需要使用抽象语法树（AST）解析工具，如 Babel。\n- **webpack 版本兼容性**：webpack 的插件 API 在不同的版本之间可能会有所变化。上述代码示例是基于假定的 API 结构编写的，实际使用时需要根据你的 webpack 版本调整 API 的使用。\n\n此插件可以视为检测源代码中 `console.log` 使用情况的起点，可以根据具体需求进行扩展和优化。\n",{"_54":649,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/837/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/837/timeline",{"_54":652,"_56":57,"_58":653,"_60":654,"_62":655,"_64":656,"_66":657,"_68":658,"_70":659,"_72":660,"_74":661,"_107":662,"_127":128,"_129":26,"_130":-5,"_131":665,"_133":666,"_155":148,"_149":668,"_151":669,"_154":-5,"_158":159,"_160":670,"_165":-5,"_166":671,"_168":672,"_180":674,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/826","https://api.github.com/repos/pro-collection/interview-question/issues/826/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/826/comments","https://api.github.com/repos/pro-collection/interview-question/issues/826/events","https://github.com/pro-collection/interview-question/issues/826",2471483918,"I_kwDOJGDC6c6TT9oO",826,"js 数据类型里面，Map 和 object 分别有哪些适用场景，开发中该如何抉择【热度: 395】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[663,664],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":667,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-17T11:20:19Z","2024-08-21T14:23:08Z",{"_162":148,"_163":148,"_164":148},"在 JavaScript 中，`Map`和普通的对象（`Object`）都可以用作键值对的集合，但它们各自的特性和使用场景有所不同。根据这些特性和场景，你可以选择最适合你需求的数据结构。\r\n\r\n### Object\r\n\r\n**特性**：\r\n\r\n- 键（key）必须是字符串或符号（`Symbol`）。\r\n- 适合少量和简单数据结构的场景，以及当你知道键集合不会经常变化时。\r\n- 对象字面量语法简洁，易于创建和操作。\r\n- 部分现代 JavaScript 引擎对对象进行了优化，在访问已知键和枚举属性时表现良好。\r\n\r\n**适用场景**：\r\n\r\n- 当键是简单字符串时。\r\n- 需要将数据结构序列化为 JSON 时（`Map`不支持直接序列化）。\r\n- 当利用对象在原型链上提供方法时，例如`.toString()`。\r\n- 当要利用存在的库和框架 API，这些 API 期望传入对象时。\r\n\r\n### Map\r\n\r\n**特性**：\r\n\r\n- 键可以是任意值，包括对象。\r\n- 保留了键值对的插入顺序。\r\n- 可以容易地获取其大小（`Map.prototype.size`属性）。\r\n- 更加适合频繁增删键值对的场景。\r\n- 直接的迭代支持，`Map`有`.keys()`, `.values()`, 和 `.entries()`方法，以及可以直接被 for...of 循环迭代。\r\n\r\n**适用场景**：\r\n\r\n- 键的集合是动态的，频繁增加或删除键值对。\r\n- 键不仅仅是字符串或符号，可能是对象或其他复杂类型。\r\n- 需要保持键值对的插入顺序。\r\n- 当集合大小经常变化且需频繁读取大小时。\r\n- 需要高性能的迭代操作。\r\n\r\n### 抉择\r\n\r\n选择`Map`还是`Object`主要取决于你的具体应用场景：\r\n\r\n- **静态和可序列化的键值对集合**：如果你需要一个简单的数据结构来表示静态的键值对集合，且可能需要将这个集合序列化为 JSON，那么普通对象可能更适合你的需求。\r\n- **动态或复杂的键值对集合**：如果你需要存储复杂类型的键，或者你的键值对集合需要频繁更新（添加/删除键值对），同时需要保留插入顺序，那么`Map`将是更好的选择。\r\n\r\n通常，`Map`在处理复杂、动态或大量的键值对数据时提供了更好的灵活性和性能。然而，在简单的场景下，或当需要利用 JSON 进行序列化、反序列化时，使用普通的对象可能更方便和直观。",{"_54":673,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/826/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/826/timeline",{"_54":676,"_56":57,"_58":677,"_60":678,"_62":679,"_64":680,"_66":681,"_68":682,"_70":683,"_72":684,"_74":685,"_107":686,"_127":128,"_129":26,"_130":-5,"_131":689,"_133":690,"_155":148,"_149":702,"_151":703,"_154":-5,"_158":159,"_160":704,"_165":-5,"_166":705,"_168":706,"_180":708,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/825","https://api.github.com/repos/pro-collection/interview-question/issues/825/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/825/comments","https://api.github.com/repos/pro-collection/interview-question/issues/825/events","https://github.com/pro-collection/interview-question/issues/825",2471481428,"I_kwDOJGDC6c6TT9BU",825,"promise 的三种状态分别是什么，是怎么转换的，转换时机呢?【热度: 323】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[687,688],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":691,"_64":692,"_58":693,"_66":694,"_68":695,"_70":185,"_72":696,"_118":697,"_143":698,"_145":699,"_147":148,"_127":128,"_149":700,"_151":701,"_153":-5,"_154":-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","初","初级面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2024-08-17T11:12:28Z","2024-08-17T11:12:29Z",{"_162":148,"_163":148,"_164":148},"**关键词**：promise 状态\n\n`Promise` 在 JavaScript 中是一种非常有用的异步编程构造，它代表了一个可能现在、将来或永远都不会完成的操作的结果。每个`Promise`对象都会经历以下三种状态之一：\n\n### Promise 的三种状态：\n\n1. **Pending (待定)**: 这是`Promise`的初始状态，表示异步操作尚未完成，也尚未失败。\n2. **Fulfilled (已兑现)**: 表示与`Promise`相关联的异步操作已成功完成。\n3. **Rejected (已拒绝)**: 表示与`Promise`相关联的异步操作已失败。\n\n### 状态转换：\n\n- **从 Pending 到 Fulfilled**:\n\n - 当异步操作成功完成时，调用`resolve()`函数，此时 Promise 的状态会从`Pending`变为`Fulfilled`。\n - 这时`.then()`方法中注册的成功处理函数（如果有的话）会被调用。\n\n- **从 Pending 到 Rejected**:\n - 当异步操作失败或出现错误时，调用`reject()`函数，此时 Promise 的状态会从`Pending`变为`Rejected`。\n - 这时`.catch()`方法中注册的失败处理函数（如果有的话）会被调用。\n\n一旦`Promise`的状态从`Pending`变为`Fulfilled`或`Rejected`，它就不能再变为任何其它状态，即`Promise`的状态是不可逆的。相应地，`resolve`和`reject`函数也只能有效地各自调用一次；额外的调用将被忽略。\n\n### 转换时机：\n\n- `Promise`状态的转换时机取决于异步操作何时完成或失败。\n- 使用`resolve()`或`reject()`函数明确地标记异步操作的成功或失败。\n- 调用`resolve()`后，所有挂在该`Promise`上的`.then()`中成功处理函数将被异步调用。\n- 调用`reject()`后，所有挂在该`Promise`上的`.catch()`中失败处理函数将被异步调用。\n\n### 示例：\n\n下面是一个简单的`Promise`示例，它演示了如何创建`Promise`，以及`Promise`的状态如何从`Pending`转变为其他状态：\n\n```javascript\nlet promise = new Promise((resolve, reject) => {\n // 异步操作\n setTimeout(() => {\n const success = true; // 假设这是根据异步操作结果而定的逻辑\n if (success) {\n resolve(\"Operation successful\"); // 从 Pending 到 Fulfilled\n } else {\n reject(\"Operation failed\"); // 从 Pending 到 Rejected\n }\n }, 1000);\n});\n\n// 监听 Promise 的结果\npromise.then(\n (value) => console.log(value), // 成功处理函数\n (error) => console.log(error) // 失败处理函数\n);\n```\n\n在这个示例中，`setTimeout`模拟了异步操作，`success`变量代表操作是否成功。根据`success`的值，`promise`的状态会相应地转换成`Fulfilled`或`Rejected`。\n",{"_54":707,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/825/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/825/timeline",{"_54":710,"_56":57,"_58":711,"_60":712,"_62":713,"_64":714,"_66":715,"_68":716,"_70":717,"_72":718,"_74":719,"_107":720,"_127":128,"_129":26,"_130":-5,"_131":723,"_133":724,"_155":148,"_149":726,"_151":727,"_154":-5,"_158":159,"_160":728,"_165":-5,"_166":729,"_168":730,"_180":732,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/806","https://api.github.com/repos/pro-collection/interview-question/issues/806/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/806/comments","https://api.github.com/repos/pro-collection/interview-question/issues/806/events","https://github.com/pro-collection/interview-question/issues/806",2421184970,"I_kwDOJGDC6c6QUFnK",806,"如何减少项目里面 if-else【热度: 310】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[721,722],{"_66":338,"_68":339,"_54":340,"_113":341,"_115":342,"_117":26,"_118":343},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":725,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-07-21T02:52:59Z","2024-07-21T02:53:00Z",{"_162":148,"_163":148,"_164":148},"**关键词**：减少 if-else\n\n当项目中存在大量的 `if-else` 语句时，可以考虑以下几种优化方法：\n\n1. 策略模式\n\n - 创建一组策略对象，每个对象对应一种条件和处理逻辑。根据不同的条件选择相应的策略对象来执行操作。\n\n2. 表驱动法\n\n - 建立一个数据结构（如对象或数组），将条件与对应的处理函数或值关联起来，通过查找表来获取相应的处理方式。\n\n3. 多态\n\n - 如果条件判断基于不同的对象类型，可以使用多态性，让每个对象类型实现自己的处理方法。\n\n4. 提取函数\n\n - 将每个 `if-else` 分支中的复杂逻辑提取为独立的函数，以提高代码的可读性和可维护性。\n\n5. 状态模式\n - 当条件判断反映的是对象的不同状态时，可以使用状态模式来处理。\n\n例如，使用表驱动法的示例代码如下：\n\n```javascript\nconst handlers = {\n condition1: () => {\n // 处理条件 1 的逻辑\n },\n condition2: () => {\n // 处理条件 2 的逻辑\n },\n // 更多条件和处理函数\n};\n\nconst condition = \"condition1\"; // 实际的条件\n\nif (handlers[condition]) {\n handlers[condition]();\n}\n```\n\n通过这些方法，可以使代码更加简洁、灵活和易于维护，减少大量 `if-else` 带来的复杂性和混乱。\n\n**参考文档**\n\n- https://juejin.cn/post/7368777511952924698\n",{"_54":731,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/806/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/806/timeline",{"_54":734,"_56":57,"_58":735,"_60":736,"_62":737,"_64":738,"_66":739,"_68":740,"_70":741,"_72":742,"_74":743,"_107":744,"_127":128,"_129":26,"_130":-5,"_131":747,"_133":748,"_155":148,"_149":750,"_151":751,"_154":-5,"_158":159,"_160":752,"_165":-5,"_166":753,"_168":754,"_180":756,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/784","https://api.github.com/repos/pro-collection/interview-question/issues/784/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/784/comments","https://api.github.com/repos/pro-collection/interview-question/issues/784/events","https://github.com/pro-collection/interview-question/issues/784",2405425934,"I_kwDOJGDC6c6PX-MO",784,"前端应用如何做国际化？【热度: 199】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[745,746],{"_66":338,"_68":339,"_54":340,"_113":341,"_115":342,"_117":26,"_118":343},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":749,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-07-12T12:08:16Z","2024-07-12T12:08:17Z",{"_162":148,"_163":148,"_164":148},"**关键词**：国际化\n\n前端应用实现国际化（i18n）主要是为了支持多语言环境，提高用户体验。这里有几种常用的方案：\n\n1. **使用国际化库**：这是最常用的方法之一，可以通过引用第三方库来管理不同语言环境的资源文件。比如：\n\n - **React**：可以使用`react-intl`或`react-i18next`。\n - **Vue**：可以使用`vue-i18n`。\n - **Angular**：可以使用`@ngx-translate/core`。\n\n 这些库允许你将文本资源分开管理，并根据用户的语言偏好动态加载相应的资源。\n\n2. **浏览器 API**：利用浏览器内置的国际化 API，如`Intl`对象，来格式化日期、时间、货币等。\n\n3. **自建国际化框架**：根据项目的具体需求，自定义国际化实现。这通常包括：\n\n - 创建资源文件：为每种语言创建一个资源文件，用于存储翻译字符串。\n - 语言选择功能：允许用户选择偏好的语言。\n - 加载对应资源文件：根据用户的语言偏好，动态加载对应的资源文件并在界面上显示相应的文本。\n\n4. **服务端支持**：有些情况下，前端应用可能需要服务端的支持来实现国际化，如动态提供不同语言的数据内容。\n\n5. **URL 路由**：在 URL 中包含语言参数，来确定显示哪种语言的内容。例如，`/en/about` 显示英文版“关于”页面，而 `/zh/about` 显示中文版。\n\n6. **浏览器语言检测**：通过检测浏览器的`navigator.language`属性来自动选择最合适的语言版本。\n\n在实际应用中，根据项目的大小、复杂度以及特定需求，可以选择一种或多种方案结合使用，以达到最佳的国际化效果。\n",{"_54":755,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/784/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/784/timeline",{"_54":758,"_56":57,"_58":759,"_60":760,"_62":761,"_64":762,"_66":763,"_68":764,"_70":765,"_72":766,"_74":767,"_107":768,"_127":128,"_129":26,"_130":-5,"_131":771,"_133":772,"_155":148,"_149":774,"_151":775,"_154":-5,"_158":159,"_160":776,"_165":-5,"_166":777,"_168":778,"_180":780,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/772","https://api.github.com/repos/pro-collection/interview-question/issues/772/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/772/comments","https://api.github.com/repos/pro-collection/interview-question/issues/772/events","https://github.com/pro-collection/interview-question/issues/772",2317414926,"I_kwDOJGDC6c6KIPIO",772,"在做 eslint 和 commitlint 的时候，可以使用 --no-verify 跳过，这种情况下该如何强制卡点【热度: 233】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[769,770],{"_66":610,"_68":611,"_54":612,"_113":613,"_115":614,"_117":26,"_118":615},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":231,"_64":232,"_58":233,"_66":234,"_68":235,"_70":236,"_72":237,"_118":238,"_143":773,"_145":240,"_147":148,"_127":128,"_149":241,"_151":242,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-26T03:26:19Z","2024-05-26T03:26:20Z",{"_162":148,"_163":148,"_164":148},"**关键词**：commit 与 eslint 规范\n\n跳过`eslint`和`commitlint`的钩子，使用`--no-verify`（对于`git commit`来说是`-n`），的确是一个容许开发者在紧急情况下超越钩子检查的手段。然而，这也削弱了代码质量保证的制度。以下是一些方法，可以用来加强这些卡点的靠谱办法：\n\n- **CI/CD 流水线中增加检查**：在你的 CI/CD 流程中增加`eslint`和`commitlint`的检查步骤。如果检查失败，则阻止代码合并或部署。\n\n- **强制挂钩**：虽然开发者可能在本地禁用钩子，但你不能控制别人的本地环境。相反，你可以编写服务器端的钩子，比如在 Git 仓库的服务器上使用`pre-receive`钩子，来拒绝不符合规范的提交。\n\n- **定期自动化检查**：定期运行一个自动化的脚本或 GitHub Action，检查代码库的 eslint 与 commitlint 违规情况，并自动创建一个修复问题的 issue 或拉取请求。\n\n你可以最大限度地减少绕过`eslint`和`commitlint`检查的情况。然而，值得记住的是，在极少数情况下，可能存在合法的理由需要紧急提交代码。因此，为了灵活性和效率，完全禁止`--no-verify`可能不是一个最佳的选择。好的实践中应该找到安全和灵活性之间的平衡，核心在于建立一个质量意识，制定明智的操作规范。\n",{"_54":779,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/772/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/772/timeline",{"_54":782,"_56":57,"_58":783,"_60":784,"_62":785,"_64":786,"_66":787,"_68":788,"_70":789,"_72":790,"_74":791,"_107":792,"_127":128,"_129":26,"_130":-5,"_131":795,"_133":796,"_155":148,"_149":798,"_151":798,"_154":-5,"_158":159,"_160":799,"_165":-5,"_166":800,"_168":801,"_180":803,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/740","https://api.github.com/repos/pro-collection/interview-question/issues/740/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/740/comments","https://api.github.com/repos/pro-collection/interview-question/issues/740/events","https://github.com/pro-collection/interview-question/issues/740",2279582114,"I_kwDOJGDC6c6H36mi",740,"vue 中 Scoped Styles 是如何实现样式隔离的，原理是啥？【热度: 244】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[793,794],{"_66":462,"_68":463,"_54":464,"_113":465,"_115":466,"_117":26,"_118":467},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":231,"_64":232,"_58":233,"_66":234,"_68":235,"_70":236,"_72":237,"_118":238,"_143":797,"_145":240,"_147":148,"_127":128,"_149":241,"_151":242,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-05T15:20:28Z",{"_162":148,"_163":148,"_164":148},"**关键词**：Scoped Styles 样式隔离\n\n在 Vue 中，`.vue` 单文件组件的 `\n```\n\n`vue-loader` 将处理上述代码，模板中的 `\n```\n\nCSS 则会被转换成：\n\n```css\n.btn[data-v-f3f3eg9] {\n background-color: blue;\n}\n```\n\n因此，`.btn` 类的样式仅会应用于拥有 `data-v-f3f3eg9` 属性的 `