12使用Vue的最佳实践

时间：2023-03-31 16:50:45 vue.js

随着VueJS的使用越来越广泛，一些最佳实践出现并逐渐成为标准。1.始终使用：keyinv-for当需要操作数据时，将key属性与v-for指令一起使用可以保持程序的恒定性和可预测性。这是必要的，以便Vue可以跟踪组件状态并持续引用不同的元素。key在处理动画或Vue过渡时很有用。没有键，Vue只是试图让DOM尽可能高效。这可能意味着v-for中的元素可能出现乱序，或者它们的行为不太可预测。如果我们对每个元素都有唯一的键引用，那么我们可以更好地预测Vue应用程序将如何准确地处理DOM操作。

2.使用连字符命名事件在发出自定义事件时，最好使用连字符命名，因为在父组件中，我们使用相同的语法来监听事件。因此，为了确保我们组件之间的一致性，并使您的代码更具可读性，请在两个地方都使用破折号名称。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。//错误做法问题是在Vue中首先使用v-for指令而不是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项目中。9.单实例组件命名应以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(){//stuffhappens}},watch(){property(){this.handleChange()}}但是，Vue有一个内置的解决方案，一个我们经常忘记的Vuewatch属性。我们所要做的就是稍微重构一下手表并声明两个属性：1.handler(newVal,oldVal)-这是我们的手表方法本身。2.immediate:true-表示如果在wacth中声明，则立即执行里面的handler方法。如果为false，则和我们之前的效果一样，绑定的时候不会执行。//OKMethodmethods:{handleChange(){//stuffhappenshappens}},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('')}}更多技术请关注：微信公众号-成都语音|微博-成都之声|抖音-成都之声|快手-成都好声音成都好声音微博：https://weibo.com/u/6998818297成都好声音抖音：https://v.douyin.com/vYeC8n/

上一篇：部署vue项目到阿里云服务器（windows-Nginx代理）

下一篇：vuehash方式实现微信扫码分享

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