使用Vue的12个最佳实践

时间：2023-03-30 23:18:33 CSS

作者：MattMaribojoc译者：前端小智来源：Medium喜欢再看，微信搜索【伟大的走向世界】没有大厂背景就关注这个，但是有一个积极的态度的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。随着VueJS的使用越来越广泛，出现了几种最佳实践并逐渐成为标准。这篇文章主要分享一些日常开发中有用的资源和技巧，废话不多说开始吧。1.始终在v-for中使用:key当您需要操作数据时，将key属性与v-for指令一起使用可以使您的程序保持稳定和可预测。这是必要的，以便Vue可以跟踪组件状态并持续引用不同的元素。key在处理动画或Vue过渡时很有用。没有键，Vue只是试图让DOM尽可能高效。这可能意味着v-for中的元素可能出现乱序，或者它们的行为不太可预测。如果我们对每个元素都有唯一的键引用，那么我们可以更好地预测Vue应用程序将如何准确地处理DOM操作。

在事件中使用破折号在发出自定义事件时，最好使用破折号，因为在父组件中，我们使用相同的语法来监听事件。因此，为了确保我们组件之间的一致性，并使您的代码更具可读性，请在两个地方都使用破折号名称。this.$emit('close-window')//在父组件中3.使用驼峰式声明props，在props中使用破折号命名template访问props的最佳实践是遵循每种语言的约定。在JS中，驼峰式大小写是标准的，在HTML中，它是破折号。所以我们相应地使用它们。幸运的是，Vue已经提供了驼峰式和破折号名称之间的转换，所以我们不必担心除了实际声明它们之外的任何事情。//不好的做法props:{'title-text':String}//好的做法props:{titleText:String}4.datashouldalwaysreturnafunction当声明组件数据时，data选项应该总是返回一个函数。如果返回一个对象，数据将在组件的所有实例之间共享。//不好的做法data:{name:'MyWindow',articles:[]}然而，大多数时候，我们的目标是构建可重用的组件，因此我们希望每个组件返回一个唯一的对象。我们通过在函数中返回数据对象来做到这一点。//goodpracticedata(){return{name:'MyWindow',articles:[]}}5.不要对同一个元素同时使用v-if和v-for指令来过滤数组中的元素，我们很容易在同一个元素上同时使用v-if和v-for。//错误做法问题是v-for指令在Vue中优于v-if指令。它遍历每个元素，然后检查v-if条件。this.products.map(function(product){if(product.price<500){returnproduct}})这意味着，即使我们只想渲染列表中的几个元素，我们也必须遍历整个大批。当然，这对我们没有任何好处。一个更聪明的解决方案是迭代计算属性，将上面的示例重构为如下所示：filter(function(product){returnproduct.price<100})}}这有几个好处：渲染效率更高，因为我们不遍历所有元素只有当依赖项发生变化时，过滤后的元素才会被重用这种写法list有助于将组件逻辑从模板中分离出来，使组件更具可读性6.验证我们的props是否可以通过正确的定义来验证是非常重要的。为什么？在设计大型项目时，很容易忘记道具的确切格式、类型和其他约定。如果你在一个更大的开发团队中，你的同事无法读心，所以让他们清楚如何使用你的组件。因此，我们可以只编写props验证，而不必费力地通过组件来确定props的格式从Vue文档中查看这个示例。props:{status:{type:String,required:true,validator:function(value){返回['syncing','synced','version-conflict','error'].indexOf(value)!==-1}}}7。组件的全名使用驼峰式或破折号。组件的一般命名约定是使用驼峰式或破折号。无论我们使用哪一种，最重要的是始终保持一致。我认为camelCase效果最好，因为大多数IDE自动完成都支持它。#不好的做法mycomponent.vuemyComponent.vueMycomponent.vue#好的做法MyComponent.vue8。基础组件应该有相应的前缀根据Vue样式指南，基础组件是只包含以下内容的组件：HTML元素附加基础组件第三方命名这些组件的最佳实践是给它们前缀Base、V或应用程序。同样，只要我们在整个项目中保持一致，就可以使用其中任何一个。BaseButton.vueBaseIcon.vueBaseHeading.vue这个命名约定的目的是让基本组件在文件系统中按字母顺序分组。此外，通过使用webpack导入功能，我们可以搜索符合命名约定模式的组件，并自动将所有组件作为全局变量导入到Vue项目中。单实例组件名称应以The为前缀与基础组件类似，单实例组件（每页使用一次且不接受任何props）应该有自己的命名约定。这些组件特定于我们的应用程序，通常是页脚、页眉或侧边栏。该组件只能有一个活动实例。TheHeader.vueTheFooter.vueTheSidebar.vueThePopup.vue10.保持指令简写一致Vue开发人员中的一种常见技术是使用指令简写。例如：@是v-on的简写：是v-bind的简写#是v-slot的简写在你的Vue项目中使用这些简写是很好的。但是在整个项目中创建某种约定，总是使用它们或从不使用它们，将使我们的项目更具凝聚力和可读性。11.不要在“created”和“watch”中调用方法Vue开发人员常犯的一个错误是他们不必要地调用created和watch中的方法。这背后的想法是我们希望在组件初始化后立即运行手表。//不好的做法创建了：(){this.handleChange()},methods:{handleChange(){//事情发生了}},watch(){property(){this.handleChange()}}但是，Vue有一个内置的解决方案，我们经常忘记的Vuewatch属性。我们所要做的就是稍微重构一下手表并声明两个属性：1.handler(newVal,oldVal)-这是我们的手表方法本身。immediate:true-表示如果在wacth中声明，会立即执行里面的handler方法。如果为false，则和我们之前的效果一样，绑定的时候不会执行。//好的做法methods:{handleChange(){//stuffhappens}},watch(){property{immediate:truehandler(){this.handleChange()}}}12.模板表达式应该只包含模板中的基本JS表达式拥有尽可能多的内联函数是很自然的。但这会使我们的模板声明性降低，变得更加复杂，从而使模板变得非常混乱。为此，让我们看一下Vue样式指南中规范化字符串的另一个示例，看看它有多混乱。//不好的做法{{fullName.split('').map(function(word){returnword[0].toUpperCase()+word.slice(1)}).join('')}}basic最重要的，我们希望模板中的所有内容都直观且不言自明。为了保持这一点，我们应该将复杂的表达式重构为适当命名的组件选项。分离复杂表达式的另一个好处是值可以重用。//好的做法{{normalizedFullName}}//复杂的表达式已经被移动到计算属性computed:{normalizedFullName:function(){returnthis.fullName.split('').map(function(word){[0].toUpperCase()+word.slice(1)}).join('')}}总结这里有12个最常见的最佳实践，它们将使我们的Vue代码更可维护和可读更好，更专业。希望这些技巧对你有用（因为它们绝对是我一直在努力记住的东西）。达人的【三通】是小智继续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。https://medium.com/better-pro...交流文章每周持续更新，可以微信搜索【大千世界】第一时间阅读，回复【福利】前端多多视频等你，本文在GitHubhttps://medium.com/better-pro...//github.com/qq449245884/xiaozhi已收录，欢迎Star。

上一篇：高性能JavaScript模板引擎原理解析

下一篇：安利首款为GitHub开发的Chrome浏览器集成插件——GayHub-

使用Vue的12个最佳实践相关文章