[{"data":1,"prerenderedAt":671},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fhow-to-optimize-performance-in-vue-apps":3,"surround:\u002Fposts\u002F2025\u002Fhow-to-optimize-performance-in-vue-apps":660},{"id":4,"title":5,"body":6,"canonical":16,"categories":632,"date":634,"description":635,"draft":636,"extension":637,"image":638,"meta":639,"navigation":640,"path":641,"permalink":642,"readingTime":643,"recommend":642,"references":642,"seo":648,"sitemap":649,"stem":654,"tags":655,"type":642,"updated":634,"__hash__":659},"content\u002Fposts\u002F2025\u002FHow To Optimize Performance In Vue Apps.md","【翻译】如何优化 Vue 应用性能",{"type":7,"value":8,"toc":603},"minimark",[9,20,28,44,47,51,54,64,67,70,73,76,79,102,105,135,138,147,150,153,157,166,175,178,181,185,188,214,217,220,223,234,243,246,254,257,263,266,269,272,276,296,304,310,313,319,325,328,334,340,347,350,353,356,362,365,368,371,374,377,383,390,393,396,406,412,415,418,421,424,430,433,439,442,457,460,469,472,480,483,489,492,501,507,514,517,520,523,527,539,551,554,557,560],[10,11,12,13],"p",{},"来源文章",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fwww.debugbear.com\u002Fblog\u002Foptimize-vue-performance",[18],"nofollow","How To Optimize Performance In Vue Apps",[10,21,22,23],{},"此文作者是 Nuxt.js 核心团队的 ",[14,24,27],{"href":25,"rel":26},"https:\u002F\u002Fx.com\u002Fjacobandrewsky",[18],"Jakub Andrzejewski",[29,30,31,38,41],"alert",{},[32,33,35],"template",{"v-slot:title":34},"",[10,36,37],{},"译者注",[10,39,40],{},"这篇文章发布在 debugbear 上。工具我们可以不用，但是优化的思路可以借鉴一番🤣",[10,42,43],{},"其中有许多链接也指向 debugbear，后续可能会把这一系列文章全部翻译为中文。",[45,46],"hr",{},[48,49,50],"h2",{"id":50},"页面加载性能与更新性能",[10,52,53],{},"当谈论在 Vue 应用中优化性能时，有两个主要方面应该被解释：",[55,56,57,61],"ul",{},[58,59,60],"li",{},"页面加载性能：这主要关于应用首次访问时内容加载速度以及变得可用的快慢。通常使用核心 Web 指标最大内容渲染（LCP）来衡量。",[58,62,63],{},"更新性能：这关注应用对用户操作的响应速度，例如，当有人输入搜索框时列表更新有多快。通常使用核心 Web 指标交互到下一次绘制（INP）来衡量。",[10,65,66],{},"理想情况下，我们希望最大化两者，但不同的前端架构使得在每个领域达到性能目标更容易或更难。此外，你正在构建的应用类型对哪些性能方面应该是优先级有很大影响。",[10,68,69],{},"本文将主要关注您可以采取哪些措施来提高 Vue 应用性能，例如内置指令、插件和概念。我们不会涉及其他优化方面，如 HTML、CSS、API 改进。",[48,71,72],{"id":72},"性能测量工具",[10,74,75],{},"为了提高性能，我们首先需要一种衡量它的方法。幸运的是，有一些出色的工具允许您在本地开发、持续集成以及生产环境中审计\u002F衡量 Vue 网站的性能。",[10,77,78],{},"用于在生产中检查负载性能：",[55,80,81,88,95],{},[58,82,83],{},[14,84,87],{"href":85,"rel":86},"https:\u002F\u002Fpagespeed.web.dev\u002F",[18],"页面速度检查",[58,89,90],{},[14,91,94],{"href":92,"rel":93},"https:\u002F\u002Fwww.webpagetest.org\u002F",[18],"网页测试",[58,96,97],{},[14,98,101],{"href":99,"rel":100},"https:\u002F\u002Fwww.debugbear.com\u002F",[18],"DebugBear",[10,103,104],{},"在本地开发期间测试性能可以通过以下方式完成：",[55,106,107,114,121,128],{},[58,108,109],{},[14,110,113],{"href":111,"rel":112},"https:\u002F\u002Fdevtools.vuejs.org\u002F",[18],"Vue 开发者工具拓展",[58,115,116],{},[14,117,120],{"href":118,"rel":119},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fperformance",[18],"Chrome 开发者工具性能面板",[58,122,123],{},[14,124,127],{"href":125,"rel":126},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fapplication.html#app-config-performance",[18],"Vue 应用配置",[58,129,130],{},[14,131,134],{"href":132,"rel":133},"https:\u002F\u002Fgithub.com\u002FGoogleChrome\u002Fweb-vitals",[18],"Web Vitals 包",[10,136,137],{},"最后，您还可以使用以下方式在持续集成中衡量性能：",[55,139,140],{},[58,141,142],{},[14,143,146],{"href":144,"rel":145},"https:\u002F\u002Fgithub.com\u002FGoogleChrome\u002Flighthouse-ci",[18],"Lighthouse CI",[48,148,149],{"id":149},"提升页面加载速度",[10,151,152],{},"这是关于应用首次访问时加载内容和变得可用的速度。",[154,155,156],"h3",{"id":156},"构建",[10,158,159,160,165],{},"如果快速",[14,161,164],{"href":162,"rel":163},"https:\u002F\u002Fwww.debugbear.com\u002Fdocs\u002Fpage-load-time",[18],"页面加载时间","对您的应用至关重要，请尽量避免将其做成纯客户端的 SPA。",[10,167,168,169,174],{},"服务器发送已包含用户所需内容的 HTML 更好，因为仅客户端渲染会减慢内容可见的时间。服务器端渲染（SSR）或静态站点生成（SSG）可以解决这个问题。要了解更多关于 SSR 如何提高 Vue 应用程序性能的信息，请查看",[14,170,173],{"href":171,"rel":172},"https:\u002F\u002Fwww.debugbear.com\u002Fblog\u002Fvue-ssr",[18],"这篇文章","。",[10,176,177],{},"如果你的应用不需要很多复杂的交互性，你也可以使用传统的后端服务器来渲染 HTML，并添加 Vue 进行客户端增强。",[10,179,180],{},"如果您需要主应用是一个单页应用（SPA），但又有营销页面（如着陆页或博客页面），考虑将它们分开！理想情况下，这些营销页面应以静态 HTML 的形式部署，使用静态站点生成器，并尽可能减少 JavaScript 的使用。",[154,182,184],{"id":183},"bundling-捆绑包","Bundling 捆绑包",[10,186,187],{},"我们向客户端\u002F浏览器发送的代码越少，我们的 Vue 应用程序的性能就越好。",[55,189,190,193,196,205],{},[58,191,192],{},"优先选择提供 ES 模块格式且对 tree-shaking 友好的依赖项。",[58,194,195],{},"确保删除任何未使用的代码。许多 Vue 插件和集成默认都带有这种设置。",[58,197,198,199,204],{},"如果您主要使用 Vue 进行渐进增强并希望避免构建步骤，请考虑使用 ",[14,200,203],{"href":201,"rel":202},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fpetite-vue",[18],"petite-vue","（仅 6kb）。",[58,206,207,208,213],{},"检查依赖项的大小并评估它提供的功能是否值得。可以使用如 ",[14,209,212],{"href":210,"rel":211},"https:\u002F\u002Fbundlejs.com\u002F",[18],"bundlejs.com"," 之类的工具进行快速检查，但使用您实际的构建设置进行测量始终是最准确的。",[154,215,216],{"id":216},"代码拆分",[10,218,219],{},"代码拆分是构建工具采用的一种技术，用于将应用程序包拆分为更小、更易于管理的块。这些块可以按需或并行加载，通过减少初始需要加载的代码量来优化性能。",[10,221,222],{},"可以通过使用以下一种或所有方法来实现。",[224,225,231],"pre",{"className":226,"code":228,"filename":229,"language":230,"meta":34},[227],"language-js","function lazyLoadImport() {\n    return import(\".\u002FbelowTheFold.js\");\n}\n","belowTheFold.js","js",[232,233,228],"code",{"__ignoreMap":34},[10,235,236,238,239,242],{},[232,237,229],{"code":229}," 及其依赖将被拆分为单独的块，并且仅在调用 ",[232,240,241],{"code":241},"lazyLoadImport()"," 时才加载。",[10,244,245],{},"懒加载对于初始页面加载后不是立即必需的功能特别有用。在 Vue 应用中，可以通过使用 Vue 的异步组件功能来实现，这使您能够将组件树拆分为更小的块，按需加载。",[224,247,252],{"className":248,"code":250,"language":251,"meta":34},[249],"language-ts","import { defineAsyncComponent } from \"vue\";\n\nconst MyComponent = defineAsyncComponent(() => import(\".\u002FMyComponent.vue\"));\n","ts",[232,253,250],{"__ignoreMap":34},[10,255,256],{},"对于使用 Vue Router 的应用，强烈建议使用懒加载路由：",[224,258,261],{"className":259,"code":260,"language":251,"meta":34},[249],"const router = createRouter({\n    \u002F\u002F ...\n    routes: [\n        {\n            path: \"\u002Ftasks\u002F:id\",\n            component: () => import(\".\u002Fviews\u002FTaskDetails.vue\")\n        },\n    ],\n});\n",[232,262,260],{"__ignoreMap":34},[10,264,265],{},"Vue Router 仅在首次进入页面时获取组件代码，然后使用缓存版本。",[48,267,268],{"id":268},"提升应用响应性",[10,270,271],{},"这关注的是应用对用户操作的响应速度，例如，当有人输入搜索框时列表更新有多快。",[154,273,275],{"id":274},"v-show-和-v-if","v-show 和 v-if",[10,277,278,281,282,285,286,288,289,291,292,295],{},[232,279,280],{"code":280},"v-if"," 和 ",[232,283,284],{"code":284},"v-show"," 都控制元素的可见性，但它们以不同的方式做到这一点。 ",[232,287,280],{"code":280}," 完全从 DOM 中添加或删除元素，这可能会更消耗性能。另一方面， ",[232,290,284],{"code":284}," 切换 ",[232,293,294],{"code":294},"display"," CSS 属性，使其成为需要频繁显示或隐藏的元素的一个更高效的选择。",[224,297,302],{"className":298,"code":300,"language":301,"meta":34},[299],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst show = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cbutton @click=\"show = !show\">\n            Toggle\n        \u003C\u002Fbutton>\n        \u003Cdiv v-show=\"show\">\n            Toggled display property\n        \u003C\u002Fdiv>\n        \u003Cdiv v-if=\"show\">\n            Element added to the DOM\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[232,303,300],{"__ignoreMap":34},[10,305,306,307,309],{},"考虑使用 ",[232,308,284],{"code":284}," 来表示频繁切换以使状态变化更高效的元素。",[154,311,312],{"id":312},"无需后续更新的内容渲染",[10,314,315,318],{},[232,316,317],{"code":317},"v-once"," 是一个内置指令，可用于渲染依赖于运行时数据但无需更新的内容。它所使用的整个子树在所有未来的更新中都将被跳过。",[224,320,323],{"className":321,"code":322,"language":301,"meta":34},[299],"\u003C!-- 单个元素 -->\n\u003Cspan v-once>\nThis will never change: {{msg}}\n\u003C\u002Fspan>\n\n\u003C!-- 包含子元素 -->\n\u003Cdiv v-once>\n  \u003Ch1>Comment\u003C\u002Fh1>\n  \u003Cp>{{msg}}\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003C!-- `v-for` 指令 -->\n\u003Cul>\n  \u003Cli v-for=\"i in list\" v-once>{{i}}\u003C\u002Fli>\n\u003C\u002Ful>\n",[232,324,322],{"__ignoreMap":34},[154,326,327],{"id":327},"有条件的跳过大型列表更新",[10,329,330,333],{},[232,331,332],{"code":332},"v-memo"," 是一个内置指令，可用于有条件地跳过大型子树或 v-for 列表的更新。",[224,335,338],{"className":336,"code":337,"language":301,"meta":34},[299],"\u003Cdiv v-memo=\"[valueA, valueB]\">\n...\n\u003C\u002Fdiv>\n",[232,339,337],{"__ignoreMap":34},[10,341,342,343,346],{},"当组件重新渲染时，如果 valueA 和 valueB 保持不变，则将跳过此 ",[232,344,345],{"code":345},"\u003Cdiv>"," 及其子组件的所有更新。",[48,348,349],{"id":349},"防抖",[10,351,352],{},"在管理用户输入，如搜索查询或表单提交时，重要的是要防抖或节流事件以防止性能问题。",[10,354,355],{},"防抖延迟函数执行，直到自上次调用以来经过指定时间，而节流确保函数在给定时间间隔内只执行一次。",[224,357,360],{"className":358,"code":359,"language":301,"meta":34},[299],"\u003Cscript setup lang=\"ts\">\nimport debounce from \"lodash-es\u002Fdebounce\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\nconst search = debounce(async () => {\n    await api.getSearchResults(value); \u002F\u002F mocked search operation\n}, 400);\n\nwatch(value, (newVal) => {\n    search();\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cinput v-model=\"value\">\n\u003C\u002Ftemplate>\n",[232,361,359],{"__ignoreMap":34},[10,363,364],{},"在这个例子中，搜索功能将在用户停止输入后仅执行 400 毫秒，以最小化 API 调用次数并提高性能。",[48,366,367],{"id":367},"总体改进",[10,369,370],{},"除了页面加载时间和应用响应性之外，还有几个一般性的改进，你可以添加到你的应用中，使其整体性能更优。",[154,372,373],{"id":373},"避免将静态数据变成响应式",[10,375,376],{},"Vue 响应性是一个强大的工具，它允许我们跟踪属性的变化并在引用时修改其值。但有时，我们可能会错误地将静态属性变为响应性，如下面的示例所示：",[224,378,381],{"className":379,"code":380,"language":301,"meta":34},[299],"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst milisecondsInAnHour = ref(3600000);\n\u003C\u002Fscript>\n",[232,382,380],{"__ignoreMap":34},[10,384,385,386,389],{},"该 ",[232,387,388],{"code":388},"milisecondsInAnHour"," 变量的值不会随时间改变，因此没有必要使其变为响应式。",[154,391,392],{"id":392},"数据量很大时使用浅反应性",[10,394,395],{},"Vue 的响应式系统默认是深层次的，这使得状态管理直观，但处理大数据集时可能会引入开销。这是因为每个属性访问都会触发代理陷阱以进行依赖跟踪。",[10,397,398,399,281,402,405],{},"为了减轻这种情况，Vue 提供了 ",[232,400,401],{"code":401},"shallowRef()",[232,403,404],{"code":404},"shallowReactive()"," ，允许您选择退出深度响应性。这些浅层 API 仅在根级别创建响应式状态，而不会影响嵌套对象。",[224,407,410],{"className":408,"code":409,"language":251,"meta":34},[249],"const shallowArray = shallowRef([\n    \u002F* big list of deep objects *\u002F\n]);\n\n\u002F\u002F this won't trigger updates...\nshallowArray.value.push(newObject);\n\u002F\u002F this does:\nshallowArray.value = [...shallowArray.value, newObject];\n",[232,411,409],{"__ignoreMap":34},[154,413,414],{"id":414},"缓存",[10,416,417],{},"导航前后通常会导致触发所有渲染视图和组件的逻辑。这可能导致触发对已应经可用的数据的多次请求，因为我们已经访问过这个页面。",[10,419,420],{},"对于此类内容，我们可以利用缓存的概念（特别是“陈旧-验证更新”方法），这将允许我们缓存请求的结果并立即将其返回给用户，从而大大提高后续条目的性能。",[10,422,423],{},"陈旧-验证策略（Stale-while-revalidate）是一种 HTTP 缓存策略，其中浏览器检查缓存的响应是否仍然新鲜。如果是，浏览器将提供缓存的 内容；如果不是，它将通过从网络获取新鲜响应的同时向用户提供服务陈旧内容来“重新验证”。",[10,425,426],{},[427,428],"img",{"alt":34,"src":429},"https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F67a32216a45a4-78.webp",[10,431,432],{},"在 Vue 中，我们可以像以下这样使用 SWRV 库：",[224,434,437],{"className":435,"code":436,"language":251,"meta":34},[249],"import useSWRV from \"swrv\";\n\nconst { data, error } = useSWRV(\"\u002Fapi\u002Fuser\", fetcher);\n",[232,438,436],{"__ignoreMap":34},[10,440,441],{},"在这个例子中，Vue 组合式 useSWRV 接受一个 key 和一个 fetcher 函数。 key 是请求的唯一标识符，通常是 API 的 URL。 fetcher 接受 key 作为其参数并异步返回 data 。 useSWRV 也返回 2 个值： data 和 error 。当请求（fetcher）尚未完成时，数据将是 undefined 。",[29,443,444,448],{},[32,445,446],{"v-slot:title":34},[10,447,37],{},[10,449,450,451,456],{},"我们也可以使用 ",[14,452,455],{"href":453,"rel":454},"https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest",[18],"tanstack query"," 来作为请求的缓存层",[154,458,459],{"id":459},"渲染长列表",[10,461,462,463,468],{},"前端应用中最常见的性能挑战之一是渲染大量列表。无论框架多么高效，由于浏览器需要管理的 DOM 节点数量庞大，显示包含数千项的列表可能会很慢。为了解决这个问题，您可以使用 ",[14,464,467],{"href":465,"rel":466},"https:\u002F\u002Fgithub.com\u002FAkryum\u002Fvue-virtual-scroller",[18],"vue-virtual-scroller"," 包。",[154,470,471],{"id":471},"避免内存泄露",[10,473,474,479],{},[14,475,478],{"href":476,"rel":477},"https:\u002F\u002Fwww.debugbear.com\u002Fblog\u002Fdebugging-javascript-memory-leaks",[18],"内存泄露","最常见的情况是在组件的初始化添加监听器，但在组件卸载后没有移除它",[10,481,482],{},"要记得在组件卸载时移除事件监听器",[224,484,487],{"className":485,"code":486,"language":301,"meta":34},[299],"\u003Cscript setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\nonMounted(() => window.addEventListener('mousemove', doSomething))\nonUnmounted(() => window.removeEventListener('mousemove', doSomething))\n\u003C\u002Fscript>\n",[232,488,486],{"__ignoreMap":34},[154,490,491],{"id":491},"优化图片",[10,493,494,495,500],{},"通常，未优化的图像是性能不佳的主要原因。然而，通过使用如 ",[14,496,499],{"href":497,"rel":498},"https:\u002F\u002Funpic.pics\u002Fimg\u002Fvue\u002F",[18],"unpic\u002Fvue"," 这样的解决方案，这个问题可以轻松解决，unpic\u002Fvue 是一个针对 Vue 的高性能响应式图像组件。",[224,502,505],{"className":503,"code":504,"language":301,"meta":34},[299],"\u003Cscript setup lang=\"ts\">\nimport { Image } from \"@unpic\u002Fvue\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cimage\n        src=\"https:\u002F\u002Fcdn.shopify.com\u002Fstatic\u002Fsample-images\u002Fbath_grande_crop_center.jpeg\"\n        layout=\"constrained\"\n        width=\"800\"\n        height=\"600\"\n        alt=\"A lovely bath\"\n    \u002F>\n\u003C\u002Ftemplate>\n",[232,506,504],{"__ignoreMap":34},[10,508,509,510,513],{},"它生成一个响应式的 ",[232,511,512],{"code":512},"\u003Cimg>"," 标签，遵循最佳实践，具有正确的 srcset、sizes 和样式。该组件还可以检测大多数图像 CDN 和 CMS 中的图像 URL，并且可以在不进行构建步骤的情况下调整图像大小。",[48,515,516],{"id":516},"摘要",[10,518,519],{},"Vue 作为框架，在设计时考虑了性能，同时您还可以使用内置的可选功能，如指令，使其性能更上一层楼。实施前几节中的解决方案可以帮助您优化 Vue 应用的性能。",[10,521,522],{},"请记住，为了提高您 Web 应用程序的性能，您还需要优化 HTML、CSS 和 API 的性能，以实现整体性能良好的应用程序。",[48,524,526],{"id":525},"附加内容使用-debugbear-监控-vue-应用","附加内容：使用 DebugBear 监控 Vue 应用",[10,528,529,530,535,536],{},"通过使用 DebugBear，您可以获取关于您 Vue 应用性能的所有有价值数据，关于竞争对手的信息，以及从多个位置运行测试的能力，所有这些都可以在一个仪表板上完成！",[14,531,534],{"href":532,"rel":533},"https:\u002F\u002Fwww.debugbear.com\u002Fsignup",[18],"在此处","免费试用！\n",[427,537],{"alt":34,"src":538},"https:\u002F\u002Fwww.debugbear.com\u002Fdimg\u002F23459d836a2e8fa1dbdb4474399740f6.png",[10,540,541,542,547,548],{},"除了仪表板之外，您还可以使用 ",[14,543,546],{"href":544,"rel":545},"https:\u002F\u002Fwww.debugbear.com\u002Fhtml-size-analyzer",[18],"HTML 大小分析器","来查看哪些内容正在导致您的文档大小。查找如内联图片、大型 hydration 状态或代码重复等问题。\n",[427,549],{"alt":34,"src":550},"https:\u002F\u002Fwww.debugbear.com\u002Fdimg\u002F41b07e60285dfc1155e1cd027fbfb0f7.png",[10,552,553],{},"这可以帮助您发现未优化的代码和可以改进的地方。",[48,555,556],{"id":556},"额外资源",[10,558,559],{},"如果您想了解更多关于这些概念的信息，请查看以下文章：",[55,561,562,569,576,583,590,597],{},[58,563,564],{},[14,565,568],{"href":566,"rel":567},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbest-practices\u002Fperformance",[18],"Vue 性能文档",[58,570,571],{},[14,572,575],{"href":573,"rel":574},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2022\u002F11\u002Foptimizing-vue-app\u002F",[18],"优化 Vue 应用",[58,577,578],{},[14,579,582],{"href":580,"rel":581},"https:\u002F\u002Fdev.to\u002Fdelia_code\u002Fhow-to-optimize-performance-in-vuejs-applications-beginner-to-advanced-guide-53db",[18],"如何优化 Vue.js 应用程序性能：从入门到精通指南",[58,584,585],{},[14,586,589],{"href":587,"rel":588},"https:\u002F\u002Fflatlogic.com\u002Fblog\u002F6-ways-to-optimize-the-performance-of-vue-js-applications\u002F",[18],"6 种优化 Vue.js 应用程序性能的方法",[58,591,592],{},[14,593,596],{"href":594,"rel":595},"https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fperformance-checklist-for-vue-and-nuxt-cog",[18],"性能清单：Vue 和 Nuxt",[58,598,599],{},[14,600,602],{"href":171,"rel":601},[18],"如何通过服务器端渲染加速您的 Vue 应用",{"title":34,"searchDepth":604,"depth":604,"links":605},4,[606,608,609,615,620,621,629,630,631],{"id":50,"depth":607,"text":50},2,{"id":72,"depth":607,"text":72},{"id":149,"depth":607,"text":149,"children":610},[611,613,614],{"id":156,"depth":612,"text":156},3,{"id":183,"depth":612,"text":184},{"id":216,"depth":612,"text":216},{"id":268,"depth":607,"text":268,"children":616},[617,618,619],{"id":274,"depth":612,"text":275},{"id":312,"depth":612,"text":312},{"id":327,"depth":612,"text":327},{"id":349,"depth":607,"text":349},{"id":367,"depth":607,"text":367,"children":622},[623,624,625,626,627,628],{"id":373,"depth":612,"text":373},{"id":392,"depth":612,"text":392},{"id":414,"depth":612,"text":414},{"id":459,"depth":612,"text":459},{"id":471,"depth":612,"text":471},{"id":491,"depth":612,"text":491},{"id":516,"depth":607,"text":516},{"id":525,"depth":607,"text":526},{"id":556,"depth":607,"text":556},[633],"译","2025-02-05 15:53:41","Vue 旨在高效处理大多数典型用例，无需大量手动调整。但有时，您会遇到需要更多微调的情况。在本文中，我们将探讨优化 Vue 应用程序性能时需要注意的关键事项。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002FHow%20To%20Optimize%20Performance%20In%20Vue%20Apps.jpg",{},true,"\u002Fposts\u002F2025\u002Fhow-to-optimize-performance-in-vue-apps",null,{"text":644,"minutes":645,"time":646,"words":647},"16 min read",15.41,924600,3082,{"title":5,"description":635},{"loc":641,"images":650},[651,652,653],{"loc":429},{"loc":538},{"loc":550},"posts\u002F2025\u002FHow To Optimize Performance In Vue Apps",[656,657,658],"Vue","性能优化","翻译","Y9iwPb-nVc5VvePbvPBMoDgI4ygPe1tgooTCdkB8YGA",[661,666],{"title":662,"path":663,"stem":664,"date":665,"type":642,"children":-1},"【翻译】Vue 检查 slot 是否为空","\u002Fposts\u002F2025\u002Fchecking-if-a-slot-is-empty-in-vue","posts\u002F2025\u002FChecking if a slot is empty in Vue","2025-02-05 15:29:37",{"title":667,"path":668,"stem":669,"date":670,"type":642,"children":-1},"Drizzle ORM 使用","\u002Fposts\u002F2025\u002Fdrizzle.orm-use","posts\u002F2025\u002Fdrizzle.orm-use","2025-02-12 10:35:29",1789642590437]