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

[[422801]]

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

使用可读的命名规范

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

命名组件时使用驼峰

• NewComponent.vue ✅
• newcomponent.vue 🛑
• Newcomponent.vue 🛑

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

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

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

• TheNavbar.vue

验证 Props 的数据类型

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

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

props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 

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

props: { 
  title: String, 
  likes: Number, 
  isPublished: Boolean, 
  commentIds: Array, 
  author: Object, 
  callback: Function, 
  contactsPromise: Promise // or any other constructor 
} 

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

不要直接操作DOM

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

<input type="checkbox" @change="logStatus" /> 

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

methods: { 
  logStatus() { 
    const isOn = document.getElementById('thecheckbox').checked; 
    if( isOn ) { 
      console.log('Light is on'); 
    } else { 
      console.log('Light is off'); 
    } 
  } 
} 

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

data() { 
  return { 
    isOn = false 
  } 
}, 
methods: { 
  logStatus() { 
    if(this.isOn) { 
      console.log('Light is on'); 
    } else { 
      console.log('Light is off'); 
    } 
    this.isOn = !this.isOn; 
  } 
} 

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

拥抱计算属性

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

<div v-for=’car in cars’ v-if=’car.country =="Germany"' > 

<div v-for='car in countryFilter'> 
//.... 
computed: { 
  countryFilter: () => { 
    return this.cars.filter(function (car) { 
      return car.country =="Germany" 
    }) 
  } 
}