Vue的这五个技巧，可以大大提高我们的构建体验！

今天，主要分享 Vue 的 5个技巧，来提高项目的构建速度。

成都创新互联始终坚持【策划先行，效果至上】的经营理念，通过多达十多年累计超上千家客户的网站建设总结了一套系统有效的推广解决方案，现已广泛运用于各行各业的客户，其中包括：隧道混凝土搅拌车等企业，备受客户表扬。

使用可读的命名规范

这一点你可能已经听说过了，可读性真的很重要，特别是多人合作的项目。以下是一些被认为是最佳做法的建议。

命名组件时使用驼峰

  • NewComponent.vue
  • newcomponent.vue
  • Newcomponent.vue

**如果有子组件，可以这样命名

  • FooterSection.vue
  • FooterSectionHeading.vue
  • FooterSectionIcons.vue
  • FooterSectionButton.vue

如果没有子组件，可以尝试加前缀 the 来命名

  • TheNavbar.vue

验证 Props 的数据类型

Prop 是父子组件数据通讯的重要方式，然而，重要的是，创建 Prop 时，明确指定数据类型并对传入的数据进行验证，可以帮助避免我们在开发阶段由于类型不一致导致的 Bug。

我们新手可能时不时会经常这样写 prop:

 
 
 
 
    
  
  
  
  
  1. props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 
    2.

但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：

 
 
 
 
    
  
  
  
  
  1. props: { 
    2. 
  
  
  
  
  2.   title: String, 
    3. 
  
  
  
  
  3.   likes: Number, 
    4. 
  
  
  
  
  4.   isPublished: Boolean, 
    5. 
  
  
  
  
  5.   commentIds: Array, 
    6. 
  
  
  
  
  6.   author: Object, 
    7. 
  
  
  
  
  7.   callback: Function, 
    8. 
  
  
  
  
  8.   contactsPromise: Promise // or any other constructor 
    9. 
  
  
  
  
  9. } 
    10.

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。

不要直接操作DOM

从早期用 JQ 过来的同学，在用 Vue 时有部分人还是很喜欢直接操作DOM，这并不是坏事，不过 Vue 使用虚拟DOM，这是一个抽象的DOM版本，使编译更有效，避免在每次变化时重新渲染整个DOM。这一点在很大程度上提高了效率和资源管理，因为DOM API被调用的频率较低。这意味着，我们并不真的需要在组件中做这样的事情。

 
 
 
 
    
  
  
  
  
  1.  
    2.

如果要根据上面的 checkbox 状态做一些事情，我们可能会这样做：

 
 
 
 
    
  
  
  
  
  1. methods: { 
    2. 
  
  
  
  
  2.   logStatus() { 
    3. 
  
  
  
  
  3.     const isOn = document.getElementById('thecheckbox').checked; 
    4. 
  
  
  
  
  4.     if( isOn ) { 
    5. 
  
  
  
  
  5.       console.log('Light is on'); 
    6. 
  
  
  
  
  6.     } else { 
    7. 
  
  
  
  
  7.       console.log('Light is off'); 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9.   } 
    10. 
  
  
  
  
  10. } 
    11.

getElement 是DOM API，如果用下面这种方式来代替，效率会提高。

 
 
 
 
    
  
  
  
  
  1. data() { 
    2. 
  
  
  
  
  2.   return { 
    3. 
  
  
  
  
  3.     isOn = false 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5. }, 
    6. 
  
  
  
  
  6. methods: { 
    7. 
  
  
  
  
  7.   logStatus() { 
    8. 
  
  
  
  
  8.     if(this.isOn) { 
    9. 
  
  
  
  
  9.       console.log('Light is on'); 
    10. 
  
  
  
  
  10.     } else { 
    11. 
  
  
  
  
  11.       console.log('Light is off'); 
    12. 
  
  
  
  
  12.     } 
    13. 
  
  
  
  
  13.     this.isOn = !this.isOn; 
    14. 
  
  
  
  
  14.   } 
    15. 
  
  
  
  
  15. } 
    16.

不需要用 DOM API，这也可以达到同样的效果。无论你能用纯JS做什么，都有可能在虚拟DOM中找到更有效的方法，如果你找不到，请使用 Vue Refs。

拥抱计算属性

计算属性是减少复杂逻辑的一个很好的方式，比如，在我们的条件表达式很长的时候就很可以用计算属性，简化成一个变量，可以大大的提高可读性，也避免给后面维护的人留坑。

 
 
 
 
    
  
  
  
  
  1.  
    2.

我们可以使用v-for来循环浏览列表，有些人会像上面那样使用 v-if 来做条件或过滤。这看起来不错，但是，Vue的编译器优先考虑 v-for 而不是 v-if，所以最后的结果可能不是我们想要的，列表(想象它有100万个)将被每次循环，这样一点都不高效，我们可以使用计算属性改善这一问题。

  
 
 
 
    
   
  
  
  
  1.  
    2. 
   
  
  
  
  2. //.... 
    3. 
   
  
  
  
  3. computed: { 
    4. 
   
  
  
  
  4.   countryFilter: () => { 
    5. 
   
  
  
  
  5.     return this.cars.filter(function (car) { 
    6. 
   
  
  
  
  6.       return car.country =="Germany" 
    7. 
   
  
  
  
  7.     }) 
    8. 
   
  
  
  
  8.   } 
    9. 
   
  
  
  
  9. } 
    10.

这种循环效率更高，计算的属性也只被执行一次，只有依赖的变量变化时才会再次执行。最后，它把逻辑从模板部分分离出来，这样我们的代码就更干净和可读。

宝藏库 --- 官方文档

111

Vue 的文档写的是很详细的，毕竟是我们的人写的，比较符合我们的思考方式，文档中有很多小技巧和资源，其中有个风格指南，一定要看看。

地址：https://cn.vuejs.org/v2/style-guide/index.html

作者：Nwose Lotanna Victor 译者：前端小智

来源：medium 原文：https://blog.openreplay.com/5-useful-vuejs-tips-to-improve-your-building-experience

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 照抄不翻车：抗住千万流量的大型分布式系统架构设计
  3. 2021年五大开源式游戏化工具
  4. 数字化转型的七大热门趋势和三大渐冷趋势
  5. Windows 11新预览版22449推送：启动引导动画变样了
  6. 什么情况？游戏玩家大规模退回Windows 7系统：Windows 10暴跌

分享文章：Vue的这五个技巧，可以大大提高我们的构建体验！
标题链接：http://www.shufengxianlan.com/qtweb/news18/245868.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

域名注册知识

行业网站建设

成都网络营销　　 　宇仓仓储　　 　梓潼网站设计　　 　网站设计　　 　网站解决方案　　 　网站定制　　 　产品包装设计　　 　成都手机网站建设　　 　成都未宇聚　　 　虚拟主机　　 　成都网站推广　　 　谷歌优化排名　　 　成都虚拟主机　　 　简阳网站建设　　 　企业网站维护　　 　装饰公司网站建设方案　　 　重庆app软件开发　　 　泸州网站建设　　 　成都SEO优化公司　　 　成都微商城开发