[{"data":1,"prerenderedAt":270},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fvue-cleaner-vue-code":3,"surround:\u002Fposts\u002F2024\u002Fvue-cleaner-vue-code":259},{"id":4,"title":5,"body":6,"canonical":16,"categories":224,"date":226,"description":29,"draft":227,"extension":228,"image":229,"meta":230,"navigation":244,"path":245,"permalink":246,"readingTime":247,"recommend":246,"references":246,"seo":252,"sitemap":253,"stem":254,"tags":255,"type":246,"updated":226,"__hash__":258},"content\u002Fposts\u002F2024\u002Fvue-cleaner-vue-code.md","【翻译】编写更简洁的Vue.js代码的10个技巧",{"type":7,"value":8,"toc":208},"minimark",[9,21,24,27,30,33,38,41,49,53,64,78,82,85,95,99,102,113,117,124,127,131,134,137,141,148,155,159,162,172,176,179,182,186,189,196,199,202,205],[10,11,12,13,20],"p",{},"本文翻译至",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002F10-tips-to-write-cleaner-vuejs-code-1dp6",[18],"nofollow","10 Tips to Write Cleaner Vue.js Code","。",[10,22,23],{},"当从一个项目过渡到另一个项目时（例如换工作时），总有那么一段时间我需要适应新的项目流程和开发流程。",[10,25,26],{},"对于某些项目来说，有些东西是独一无二的，但是在 Vue 中，有些东西被认为是构建干净且可维护的基于 Vue 的项目的良好实践。",[10,28,29],{},"在本文中，我想列出这些最佳实践，以便您可以开始在 Vue 项目中使用它们:)",[10,31,32],{},"干净且可维护的代码是任何成功应用程序的支柱。Vue.js 凭借其直观的 API，可以轻松编写干净的代码，但总有改进的空间。这里有 10 个可操作的技巧，可以帮助您编写更简洁的 Vue.js 代码。",[34,35,37],"h2",{"id":36},"_1-明智的使用-composition-api","1. 明智的使用 Composition API",[10,39,40],{},"将大型逻辑分解为更小的、可重用的可组合项，以保持模块化和可读性。",[10,42,43,44,48],{},"示例：不要将所有的逻辑都塞进 ",[45,46,47],"code",{"code":47},"setup()"," 函数中，而是为不同的功能创建自定义钩子。",[34,50,52],{"id":51},"_2-遵循-vue-的命名规定","2. 遵循 Vue 的命名规定",[10,54,55,56,59,60,63],{},"使用 ",[45,57,58],{"code":58},"PascalCase"," 作为组件文件名，并可以选择使用",[45,61,62],{"code":62},"kebase-case","作为模板使用。",[10,65,66,67,70,71,74,75],{},"示例：将您的组件命名为 ",[45,68,69],{"code":69},"UserProfile.vue"," 并将其作用于模板中的",[45,72,73],{"code":73},"\u003CUserProfile \u002F>"," 或 ",[45,76,77],{"code":77},"\u003Cuser-profile \u002F>",[34,79,81],{"id":80},"_3-避免过度使用-vuex-或-pinia","3. 避免过度使用 Vuex 或 Pinia",[10,83,84],{},"将 UI 状态（例如：弹窗的可见性）保留在组件本地，而不是在全局状态管理中。",[10,86,87,88,74,91,94],{},"示例： 使用 ",[45,89,90],{"code":90},"ref",[45,92,93],{"code":93},"reactive"," 进来表示临时状态。",[34,96,98],{"id":97},"_4-有效利用插槽","4. 有效利用插槽",[10,100,101],{},"使用具名插槽可以提高可重用组件的灵活性并可以清晰的表明使用情况。",[10,103,104,105,108,109,112],{},"示例：在 ",[45,106,107],{"code":107},"Card"," 组件创建一个带有 ",[45,110,111],{"code":111},"\u003Cslot name=\"header\" \u002F>"," 的组件可以用于创建自定义头部。",[34,114,116],{"id":115},"_5-利用-scoped-限制-css-作用区域","5. 利用 scoped 限制 css 作用区域",[10,118,119,120,123],{},"在",[45,121,122],{"code":122},"\u003Cstyle scoped>","标签上添加 scoped 使用作用域样式来防止 css 冲突。",[10,125,126],{},"示例：应用于特定组件的样式而不影响应用程序中其他部分的样式。",[34,128,130],{"id":129},"_6-编写可复用组件","6. 编写可复用组件",[10,132,133],{},"将 UI 元素分解为可重用的、集中的组件，避免过于通用的设计。",[10,135,136],{},"示例：创建一个支持不同样式的 props 的可配置 Button 组件，而不是对按钮进行硬编码。",[34,138,140],{"id":139},"_7-优雅的处理异步代码","7. 优雅的处理异步代码",[10,142,143,144,147],{},"使用",[45,145,146],{"code":146},"async\u002Fawait","进行 API 调用并使用一个『全局处理器』来处理错误。",[10,149,150,151,154],{},"示例： 创建一个",[45,152,153],{"code":153},"useApi","composable 来封装 API 请求逻辑和错误处理逻辑。",[34,156,158],{"id":157},"_8-使用-typescript-标记-props-和-emit-事件","8. 使用 Typescript 标记 Props 和 Emit 事件",[10,160,161],{},"使用 Typescript 类型来清晰的定义 props 和 Emit 事件。",[10,163,164,165,168,169],{},"示例：在 Vue3 中可以使用",[45,166,167],{"code":167},"defineProps"," 和 ",[45,170,171],{"code":171},"defineEmit",[34,173,175],{"id":174},"_9-添加自动格式化插件","9. 添加自动格式化插件",[10,177,178],{},"添加 ESLint 或者 Prettier 并使用特定的规则对您的代码进行格式化和质量检查，以增强代码质量和一致性。",[10,180,181],{},"示例：将 linting 集成到 CI\u002FCD 中，并自动执行代码审查。",[34,183,185],{"id":184},"_10-在模板template中保持简单","10. 在模板（template）中保持简单",[10,187,188],{},"避免在 template 中放置复杂的逻辑，使用计算属性或者方法。",[10,190,191,192,195],{},"示例：将 ",[45,193,194],{"code":194},"v-if=\"list.filter(item => item.active).length > 0\"","的逻辑替换为计算属性。",[34,197,198],{"id":198},"总结",[10,200,201],{},"通过遵循这些技巧，您将创建更易于维护、扩展和可调试的 Vue.js 应用程序。干净的代码不仅有利于当前的项目，也有利于未来可能维护该项目的开发人员。今天就开始做起，试试其中的一些做法。",[10,203,204],{},"保重，下次再见！",[10,206,207],{},"一如既往的保持愉快的心情来编码吧！",{"title":209,"searchDepth":210,"depth":210,"links":211},"",4,[212,214,215,216,217,218,219,220,221,222,223],{"id":36,"depth":213,"text":37},2,{"id":51,"depth":213,"text":52},{"id":80,"depth":213,"text":81},{"id":97,"depth":213,"text":98},{"id":115,"depth":213,"text":116},{"id":129,"depth":213,"text":130},{"id":139,"depth":213,"text":140},{"id":157,"depth":213,"text":158},{"id":174,"depth":213,"text":175},{"id":184,"depth":213,"text":185},{"id":198,"depth":213,"text":198},[225],"译","2024-12-15 12:44:24",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679f1397bdb26-78.webp",{"excerpt":231},{"type":7,"value":232},[233,238,240,242],[10,234,12,235,20],{},[14,236,19],{"href":16,"rel":237},[18],[10,239,23],{},[10,241,26],{},[10,243,29],{},true,"\u002Fposts\u002F2024\u002Fvue-cleaner-vue-code",null,{"text":248,"minutes":249,"time":250,"words":251},"5 min read",4.385,263100,877,{"title":5,"description":29},{"loc":245},"posts\u002F2024\u002Fvue-cleaner-vue-code",[256,257],"Vue","翻译","MkJ6untCyFPgw6LGGTw1NHYrbR_n9naJMCRt1FOj7_M",[260,265],{"title":261,"path":262,"stem":263,"date":264,"type":246,"children":-1},"Rsbuild创建项目","\u002Fposts\u002F2024\u002Frsbuild-create-demo","posts\u002F2024\u002Frsbuild-create-demo","2024-12-08 10:08:01",{"title":266,"path":267,"stem":268,"date":269,"type":246,"children":-1},"【翻译】Vue 可组合项的良好实践和设计模式","\u002Fposts\u002F2024\u002Fvue-good-practices-and-design-patterns-for-vue-composables","posts\u002F2024\u002Fvue-good-practices-and-design-patterns-for-vue-composables","2024-12-15 13:38:52",1789642591271]