Vuejs建議和最佳實踐

想要更好的閱讀體驗，請直接移步個人原文出處吧：www.pilishen.com/posts/vuejs…

仍是個Vue新手？沒怎麼開始學？

若是你徹底是個Vue新手，那麼這篇文章極可能不會給你帶來太多益處，由於你得有些Vue的基礎才能理解文中所說的。若是你還沒學會vue，建議你看看咱們的這個課程《Laravel&Vue深度整合實戰第二版》，可讓你從徹底的vue零基礎，成長爲能知足平常開發大部分須要的vue高手，既有vue相關的初中高級知識，還有vue和laravel結合的方式，期間咱們開發了多個實戰效果案例。

話很少說，看看有哪些建議吧~

（一）安裝上VueDevtools

能夠說，搞Vue開發，沒有VueDevtools是不可行的。它是個火狐和chrome瀏覽器裏的擴展，裝了它，就能夠給你的vue開發帶來不盡的便利，很少說，用這個連接去裝吧~//github.com/vuejs/vue-devtools

這個的使用，咱們在課程《Laravel&Vue深度整合實戰第二版》已經演示和說了。

（二）安裝上VuePerformanceDevtool（vue性能開發工具）

這個Chrome擴展可讓你檢測vue組件的性能，也是一個很是有用的工具，能夠經過這個連接安裝：//chrome.google.com/webstore/detail/vue-performance-devtool/koljilikekcjfeecjefimopfffhkjbne

安裝好了，你得在代碼里加上這麼一句，才能啓用它：

Vue.config.performance = true;
複製代碼

記得要將其加在new Vue實例以前，固然了，這樣的話，你生產環境上也就開啓這個工具了，這每每不是咱們想要的，你能夠基於環境監測來決定是否開啓這個，能夠用下面的代碼實現：

Vue.config.performance = process.env.NODE_ENV !== 'production'
複製代碼

（三）組件間通訊

vue裏面組件間的通訊有好幾種形式。你可使用props從上到下地往組件裏傳遞數據，這是一種單向的溝通：

<my-component :firstProp="someValue"></my-component>
複製代碼

若是你想着在子組件裏通知父組件，告訴它某些事情發生了，或某個值發生了變化，能夠用子組件發送事件的方式：

...
export default {
    methods: {
        onClick() {
            this.$emit('nameOfEvent', someValue);
        }
    }
}
複製代碼

而後你就能夠在父級組件裏，對這個事件的發生作相應監聽和處理：

<my-component :firstProp="someValue" @nameOfEvent=」doSomething」></my-component>
複製代碼

這裏的$emit(）發送事件的方法，只能用在parent/child，也即父級和子級組件之間的通訊。

若是你想着實現更復雜的組件間通訊，好比兩個子級組件之間，不經過父級，如何實現通訊呢？這個時候你就可使用EventBus或者Vuex。EventBus在小中型的應用裏，基本上就夠用了，若是你並無特別複雜的組件間狀態管理的話。關於EventBus，能夠看看以前咱們給你們寫的文章：《使用Vue.js建立全局事件總線（Global Event Bus ）》

固然了，不管是props屬性傳遞，仍是父子組件事件監聽，仍是EventBus複雜通訊處理，這些呢，在咱們的課程《Laravel&Vue深度整合實戰第二版》也都給你們講解和演示了。

（四）使用VueX來作複雜的狀態管理

咱們說過EventBus模式處理小中型項目夠用了，由於它簡單直接，但若是你肯定要作一個大中型的項目，你的前端應用裏有較多數據處理，有不少貫穿整個應用的狀態須要共享或處理，那麼這個時候，就通常要使用VueX了。

學習和使用VueX的建議：

• 去學一下VueX裏的state, getters, mutations and actions這些分別是啥
• 研究一下Vuex modules，建議若是用VueX，就最好上來就用上VueX modules，若是你以爲VueX modules繁瑣、不值得，那麼可能你的應用也沒複雜到非得用VueX的地步
• 學一下如何建立出好的結構，由於VueX默認並無給你任何限制
• 學一下「strict」模式是如何運做的
• 能夠多參考一下這個Vuex Cheatsheet ：//github.com/vuejs-tips/vuex-cheatsheet

（五）代碼切割效果

現現在，性能是個熱門話題，隨着你應用愈來愈大、愈來愈複雜，咱們得讓其越快越好。儘量地實現代碼切割效果，這樣能夠極大減少你主要的bundle或app文件的體積，於是能提升你應用的初始化時間。

const Loader = () => import(/* webpackChunkName: "aChunkName" */'../path/to/component.vue');
複製代碼

能夠像這樣來動態引入你的組件，須要的時候再去加載，而不是一會兒都加載上，關於代碼切割的具體實現及原理，能夠看咱們《Laravel&Vue深度整合實戰第二版》這個課程的擴展文章，也即《在Laravel Mix裏使用動態引入來實現Code Splitting效果》

（六）組件註冊的簡單方式

傳統上，咱們喜歡這樣來註冊vue組件：

import MyAwesomeComponent from './my-awesome-component.vue';
...
components: {
    'my-awesome-component': MyAwesomeComponent
}
複製代碼

這沒啥錯，但你也能夠更簡潔一些：

...
components: {
    MyAwesomeComponent,
    MyAwesomeComponentTwo,
    MyAwesomeComponentThree
}
複製代碼

（七）避免將全部組件都註冊爲全局組件

只有一些基本的組件，你在應用裏處處用到，才應該被註冊爲全局組件，好比說一些Buttons/Inputs組件。

特定功能的組件，能夠引入到其餘的組件裏，同時能夠的話用上動態引入，這樣可讓你的bundle文件小一些，性能更好一些，這塊能夠多參考前面的代碼切割建議和文章。

（八）驗證props屬性

{id="Validateprops"}

當往一個組件裏傳參時，你最好是立馬就進行一些驗證，若是沒有驗證，沒有聲明一個props應該是個什麼類型(String, Array, Object……)，那麼尤爲是你團隊裏其餘調用你組件的人，他們就不知道該傳個啥了，包括你本身，當數據類型發生變化或錯誤時，你也沒有個很好的錯誤提示了。

這一點在咱們《Laravel&Vue深度整合實戰第二版》課程裏，也給你們重點強調和演示了。

（九）VueRouter

若是你是要作個單頁應用（spa），純前端邏輯的話，那麼極可能你會須要用到客戶端方面的路由，須要在不一樣組件之間跳來跳去，這個時候就能夠用上VueRouter，它是vue官方的路由組件。

用起來很簡單，官方文檔在這裏//router.vuejs.org/

（十）url變了，但視圖沒有更新

當在一個SPA裏時，你極可能會想着在視圖裏重複利用一些組件。假設你如今在一個博客文章頁面上，而後你想從那個頁面跳到另外一篇文章上，你會指望相應的內容也改爲新的文章的內容，但它卻沒有變化。

這每每是複用同一個組件的結果，vue仍是用了以前的一個實例，這時候組件裏this.$route是變了，可是相應的那些生命週期事件，好比created(), beforeMounted() 和 mounted()，它們就沒有被從新觸發。

這個問題，通常有兩種解決辦法：

要強制vue建立一個新的組件實例，能夠在<router-view>設置一個unique key：

<router-view :key="$route.fullPath">
複製代碼

或者你也能夠設置個watch函數，當route路由變了的時候，就觸發相應邏輯：

watch: {
    "$route.params.somevalue": {
        handler(somevalue) {
            // do stuff
        },
        immediate: true
    }
}
複製代碼

（十一）表單數據驗證

當前端有表單時，咱們可能會想着在前臺頁面直接加上驗證，這樣能夠免去非得先日後端驗證一下，固然這不是說你後端就不驗證了，雙重的驗證還是必要的，只是這樣可讓前端體驗更好更直接一些。

固然了，你不必本身去處理前端驗證的提示和邏輯，已經有這方面很好的組件了，能夠試試 Vuelidate 或 VeeValidate，兩個都不錯，均可以幫你節省很多時間

（十二）好好理解一下vue的生命週期

要想真正發揮出vue的強大，就極其建議你好好理解vue的生命週期。

比方說，若是你想在beforeCreated()下去獲取data裏的一個值，那麼就確定獲取不到；或者，你想在created()裏去獲取一個ref元素，那麼你也獲取不到，由於這個時候尚未加載DOM元素呢。

關於vue的生命週期，咱們在《Laravel&Vue深度整合實戰第二版》裏也作了重點講解，重點闡釋和演示了平常開發中的幾個最重要的周期函數，固然若是你想了解全部的週期，能夠看看下面這個完整的圖：

（十三）避免直接修改DOM

使用Vue的一個首要原則就是，你不能直接去操做和修改DOM元素，這也是咱們用一個像Vue這樣的前端框架的目的，就再也不像原生js或jquery裏那樣了。

固然了，你能夠用$refs來進行相關操做，這是更簡潔更符合vue的方式的作法，這樣也更容易往後維護，由於這樣你就不須要依賴有着某個特定class或id的元素了。

固然了，這一點，在咱們《Laravel&Vue深度整合實戰第二版》也有詳細演示。

（十四）進行數據交互

開發中，不免咱們須要跟一些外部的服務溝通，來獲取或發送數據，好比咱們的後端API。

那麼最簡單的，你能夠用瀏覽器自帶的fetch()方法來獲取數據，固然這個不必定全部瀏覽器都支持。

此外呢，建議使用axios組件來作各類數據訪問和交互，它在vue和react社區裏極其受歡迎，這一點，咱們《Laravel&Vue深度整合實戰第二版》也都詳細演示瞭如何用axios向後臺發送get、post、patch、delete等請求。

（十五）列表遍歷

vue裏面能夠用v-for很方便地進行列表遍歷：

<div v-for="item in items" v-bind:key="item.id">
   <!-- content --> 
</div>
複製代碼

當你的v-for是用來循環輸出一個簡單的array時，其中的:key是能夠不用指定的，但當你的v-for是用在一個組件上時，也即循環輸出某個組件的內容和邏輯時，就必須得加上:key，這樣的話，當你列出來的某一個組件邏輯發生變化時，vue才知道到底要去更新列表裏的哪個，因此這個:key就至關因而列表元素的一個辨識符。固然了，你也能夠無論v-for的邏輯是否複雜，是不是用在子組件上，你默認都帶上:key。

（十六）計算屬性和方法

當你想對vue實例裏已有的data數據進行進一步處理時，就能夠用計算屬性，它的另外一個好處是性能有保證，由於計算屬性的結果是會被緩存的，只要它所依賴的數據不變，它 就不用來回去計算，不用每次都計算一下。

data:{
    names: ["Leonardo", "Donatello", "Rafael", "Michaelangelo"]
},
computed:{
	//返回名字以D開頭的球星
    startsWithD(){
        return this.names.filter(name => name.startsWith("D"))
    }
}

<p v-for="(name, index) in startsWithD" :key="index">{{name}}</p>
複製代碼

若是你有個很複雜的計算屬性，那麼最好的作法時，將其拆分紅多個簡單的計算屬性，這樣更容易測試、維護和閱讀。

而一個方法，能夠理解成是綁定到vue實例上的一個函數，它只有當你明確調用它的時候才執行，就跟一個普通的js或PHP裏的方法同樣。

methods:{
    startWithCharacter(char){
        return this.names.filter(name => name.startsWith(char))
    }
}
複製代碼

關於方法與計算屬性的差異，何時該用計算屬性，何時該用方法，這個咱們在《Laravel&Vue深度整合實戰第二版》裏有更詳細的闡釋和使用。

（十七）學習和使用mixins

當咱們開發應用時，常常會遇到一些功能和邏輯，須要在不一樣的組件間屢次使用，好比一樣的方法邏輯，兩個組件都要用到，但咱們又不想也不該該徹底複製兩遍，這個時候就該用mixins了。

這意味着，若是我建立了一個組件，它有X個不一樣的方法、週期邏輯、本地的狀態等，我想複用它們，我就能夠建立個mixins，讓其餘的組件擴展這個mixins，就能夠在這些新的組件裏使用本來它們沒有的方法了。

關於mixins的更多信息，能夠看看官方文檔：//vuejs.org/v2/guide/mixins.html

（十八）用上vue自帶的修飾符

在不一樣的場景下，vue有一系列不一樣的修飾符能夠用，建議你們能夠大概看看，在一些場景下用起來仍是比較方便的。

這裏呢，並不對它們具體展開，由於都比較簡單，你們能夠直接看文檔便可。

表單修飾符（//cn.vuejs.org/v2/guide/forms.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6）

• .lazy
• .number
• .trim

事件修飾符（//cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6）

本來咱們常常須要用event.preventDefault()來阻止提交按鈕或點擊事件的默認動做，可是有了vue的事件修飾符，咱們就能夠在綁定事件時加上個.stop來阻止單擊事件繼續傳遞，用.prevent來阻止表單提交的默認刷新，很是方便，固然還有更多相似的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

按鍵修飾符，能夠很方便地監聽一些按鍵事件，文檔地址跟上面的事件修飾符是一個

• .enter
• .tab
• .delete (捕獲「刪除」和「退格」鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

（十九）好的系統佈局和架構

Vue沒有給你提供任何默認的系統佈局或架構，除非好比說你用Nuxt之類的基於Vue的框架。

因此怎麼組織你的應用結構，就取決於你本身了，取決於你的團隊了，大家怎麼樣協商出一個好的、易於理解的應用結構，讓全部的團隊成員能更好地開展協做。

若是你是個私人的小項目，你可能不須要太在乎這點，但若是大家是一個大中型的團隊項目，那麼這一點，將對大家極其重要，一個好的、有意義的系統結構，可讓大家的平常開發事半功倍、相互不牽扯。

這一點上，能夠多借鑑後端應用和框架的通行作法，好比模塊化，將本來單個的、相互牽扯的應用，開發成一個一個獨立的模塊，各個模塊間相互不影響，只經過有限的途徑進行溝通；也能夠借鑑後端比較流行的微服務架構，將本來一個龐大的系統，拆分紅多個微服務，它們徹底獨立、不相干，甚至不一樣的部分均可以用不一樣的語言、不一樣的框架。這些作法或趨勢，也正在被逐步實踐到前端框架和項目當中，在大型項目開始前，能將這個設計好，將會爲大家的開發奠基良好長遠的基礎。

（二十）作好必要的清理工做

當你在開發一個SPA應用時，若是你不留意去移除一些自定義的事件、實例、intervals等，就可能致使應用的內存佔用愈來愈多，最終變得緩慢甚至沒法響應。

能夠是像相似這個樣子：

created() {
  refreshUserLoginTokenInterval(); //開啓一個interval來刷新token
},
beforeDestroy () {
  destroyUserLoginInterval(); //在組件銷燬前，要記得移除這個interval
}
複製代碼

（二十一）往一個元素上添加多個class

添加一個class是很簡單的：

//當isError是true時，就加上red這個class
<div :class=」{'red': isError}」></div>
複製代碼

可是怎麼樣添加多個class呢？其實也很簡單

// 相應屬性爲true時，就添加相應class
<div :class="{'red': isError, 'text-bold': isActive }」></div> 複製代碼

固然了，當添加多個class時，你也可使用計算屬性來實現。

（二十二）結語

固然了，vue相關的建議和好的實踐，真要寫下去，可能永遠寫不完，這只是一些相對重要的、平常中常常遇到的一些建議。

若是你尚未開始學習vue，或者仍是一個vue新手，或者看了不少資料，就是感受不得vue的章法，那麼極其建議你入手咱們《Laravel&Vue深度整合實戰第二版》這一課程，能夠看到，這些最佳建議的大部分，咱們課程裏都已經重點講解和演示了，無論你是零基礎，仍是稍微有點基礎，用咱們這個課程均可以讓你最短期裏最好地掌握vue，讓vue成爲你平常開發中愛不釋手的技術棧。

末了，歡迎到個人站點https://www.pilishen.com/來作客哦，也歡迎加入咱們的公開羣【公開課@pilishen.com】：109256050，等你哦~