大主宰之灵路天蚕土豆,盛世嫡妃凤轻小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Vue的這五個(gè)技巧，可以大大提高我們的構(gòu)建體驗(yàn)！

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

成都創(chuàng)新互聯(lián)始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)十多年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：隧道混凝土攪拌車等企業(yè)，備受客戶表揚(yáng)。

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

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

命名組件時(shí)使用駝峰

NewComponent.vue
newcomponent.vue
Newcomponent.vue

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

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

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

TheNavbar.vue

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

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

我們新手可能時(shí)不時(shí)會(huì)經(jīng)常這樣寫 prop:

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

但是，通常你希望每個(gè) prop 都有指定的值類型。這時(shí)，你可以以對(duì)象形式列出 prop，這些 property 的名稱和值分別是 prop 各自的名稱和類型：

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

這不僅為你的組件提供了文檔，還會(huì)在它們遇到錯(cuò)誤的類型時(shí)從瀏覽器的 JavaScript 控制臺(tái)提示用戶。

不要直接操作DOM

從早期用 JQ 過來的同學(xué)，在用 Vue 時(shí)有部分人還是很喜歡直接操作DOM，這并不是壞事，不過 Vue 使用虛擬DOM，這是一個(gè)抽象的DOM版本，使編譯更有效，避免在每次變化時(shí)重新渲染整個(gè)DOM。這一點(diǎn)在很大程度上提高了效率和資源管理，因?yàn)镈OM API被調(diào)用的頻率較低。這意味著，我們并不真的需要在組件中做這樣的事情。

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

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

getElement 是DOM API，如果用下面這種方式來代替，效率會(huì)提高。

 
 
 
 
  
  
  
  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中找到更有效的方法，如果你找不到，請(qǐng)使用 Vue Refs。

擁抱計(jì)算屬性

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

我們可以使用v-for來循環(huán)瀏覽列表，有些人會(huì)像上面那樣使用 v-if 來做條件或過濾。這看起來不錯(cuò)，但是，Vue的編譯器優(yōu)先考慮 v-for 而不是 v-if，所以最后的結(jié)果可能不是我們想要的，列表(想象它有100萬個(gè))將被每次循環(huán)，這樣一點(diǎn)都不高效，我們可以使用計(jì)算屬性改善這一問題。

  
 
 
 
   
  
  
   
   
  
  
  //.... 
   
  
  
  computed: { 
   
  
  
    countryFilter: () => { 
   
  
  
      return this.cars.filter(function (car) { 
   
  
  
        return car.country =="Germany" 
   
  
  
      }) 
   
  
  
    } 
   
  
  
  }

這種循環(huán)效率更高，計(jì)算的屬性也只被執(zhí)行一次，只有依賴的變量變化時(shí)才會(huì)再次執(zhí)行。最后，它把邏輯從模板部分分離出來，這樣我們的代碼就更干凈和可讀。

寶藏庫 --- 官方文檔

111

Vue 的文檔寫的是很詳細(xì)的，畢竟是我們的人寫的，比較符合我們的思考方式，文檔中有很多小技巧和資源，其中有個(gè)風(fēng)格指南，一定要看看。

地址：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

【編輯推薦】

鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
照抄不翻車：抗住千萬流量的大型分布式系統(tǒng)架構(gòu)設(shè)計(jì)
2021年五大開源式游戲化工具
數(shù)字化轉(zhuǎn)型的七大熱門趨勢(shì)和三大漸冷趨勢(shì)
Windows 11新預(yù)覽版22449推送：啟動(dòng)引導(dǎo)動(dòng)畫變樣了
什么情況？游戲玩家大規(guī)模退回Windows 7系統(tǒng)：Windows 10暴跌

網(wǎng)頁標(biāo)題：Vue的這五個(gè)技巧，可以大大提高我們的構(gòu)建體驗(yàn)！
本文路徑：http://m.fisionsoft.com.cn/article/dhcooge.html