vue最佳實踐，是參考vue官方風格指南並根據過去 Vue 實際專案開發中的經驗總結的一套規範建議。本專案的目的是希望每個 Vue 開發者都能儘快熟悉並上手專案程式碼，志在幫助 Vue 新手開發者及時避免一些不規範的設計和由此而引發的問題。本建議如有不妥之處，敬請指正！非常歡迎有志同道合的開發者貢獻更多、更好的建議。

小弟先開個頭，大佬們一起可好！專案地址：Vue 最佳實踐

元件目錄內始終使用資料夾管理元件

在 components 目錄下的通用元件始終使用資料夾管理元件，並通過 index.js暴露元件，建議使用以下檔案結構：

├── components
│   ├── componentA
│   │   ├── componentA.vue
│   │   └── index.js
 

│   ├── componentB
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── index.js

開啟路由懶載入

vue 路由懶載入其實依賴於webpack的 code-spliting 以及 vue 的非同步元件，關於 vue 的非同步元件可以看動態元件 & 非同步元件，而非同步組依賴動態 import。

模組化路由配置

在中大型專案中，會有很多的頁面或模組，常出現路由巢狀的情況。此時，建議以路由層級進行模組拆分。檔案結構如下：

├── router
│   ├── index.js
│   ├── home.js
│   ├── login.js
 

將一級路由配置在入口檔案 index.js 中，將一級路由下的二級路由拆分為獨立的模組：

import homeRoutes from './home'
import loginRoutes from './login'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  { 
    name: 'Home'
    path: '/home'
    component: Home,
    children: [...homeRoutes]
  },
  {
    name: 'Login',
    path: 'login',
    component: Login,
    children: [...loginRoutes]
  }
]

export default new VueRouter({
  routes
})
 

模組化組織Vuex狀態

由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。

為了解決以上問題，建議使用模組化組織Vuex，將store分割成模組。

規範元件選項的順序

以下是個人推薦的元件選項預設順序：

export default {
  name: '',
  parent: null,
  extends: null,
  minxins: [],
  components: {},
  inheritAttrs: false,
  model: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  // 生命週期鉤子，按呼叫順序編寫
  beforeCreate () {},
  ...,
  destroyed () {},
  methods: {},
  directives: {},
  filters: {},
  // 使用render函式時，置於末尾
  render () {}
}

按以上的順序，元件沒使用到的選項直接預設即可。

始終為元件樣式設定作用域

全域性樣式容易汙染其他元件樣式。在vue元件中一旦使用了全域性的style，那麼你必將陷入無限的夢魘，因為你根本不知道什麼時候元件的樣式就被全域性樣式汙染了。因此，建議始終為元件樣式設定作用域。

可配置的watch偵聽器

Vue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動：偵聽屬性。vue 偵聽器 watch 監聽屬性時可以使用函式或一個包含handler處理函式的配置物件。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

化繁為簡的計算屬性

將複雜計算屬性分割為儘可能多的更簡單的屬性。簡單、專注的計算屬性減少了資訊使用時的假設性限制，所以需求變更時也用不著那麼多重構了。如：

computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

簡化後：

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

始終為列表渲染提供唯一的key值

key 的特殊屬性主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同型別元素的演算法。使用 key，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。

v-for可以使用索引index設定key值。在發生DOM插入和刪除的列表中請始終提供唯一的key值。