[[422801]]

今天，主要分享 Vue 的 5個技巧，來提高項目的構(gòu)建速度。

使用可讀的命名規(guī)范

這一點你可能已經(jīng)聽說過了，可讀性真的很重要，特別是多人合作的項目。以下是一些被認(rèn)為是最佳做法的建議。

命名組件時使用駝峰

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

**如果有子組件，可以這樣命名

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

如果沒有子組件，可以嘗試加前綴 the 來命名

• TheNavbar.vue

驗證 Props 的數(shù)據(jù)類型

Prop 是父子組件數(shù)據(jù)通訊的重要方式，然而，重要的是，創(chuàng)建 Prop 時，明確指定數(shù)據(jù)類型并對傳入的數(shù)據(jù)進(jìn)行驗證，可以幫助避免我們在開發(fā)階段由于類型不一致導(dǎo)致的 Bug。

我們新手可能時不時會經(jīng)常這樣寫 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 過來的同學(xué)，在用 Vue 時有部分人還是很喜歡直接操作DOM，這并不是壞事，不過 Vue 使用虛擬DOM，這是一個抽象的DOM版本，使編譯更有效，避免在每次變化時重新渲染整個DOM。這一點在很大程度上提高了效率和資源管理，因為DOM API被調(diào)用的頻率較低。這意味著，我們并不真的需要在組件中做這樣的事情。

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

如果要根據(jù)上面的 checkbox 狀態(tài)做一些事情，我們可能會這樣做：

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，這也可以達(dá)到同樣的效果。無論你能用純JS做什么，都有可能在虛擬DOM中找到更有效的方法，如果你找不到，請使用 Vue Refs。

擁抱計算屬性

計算屬性是減少復(fù)雜邏輯的一個很好的方式，比如，在我們的條件表達(dá)式很長的時候就很可以用計算屬性，簡化成一個變量，可以大大的提高可讀性，也避免給后面維護(hù)的人留坑。

<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" 
    }) 
  } 
}