Vue最佳實踐

時間 2019-11-08

標籤 vue 最佳實踐简体版

原文原文鏈接

Vue最佳實踐

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

項目地址：Vue 最佳實踐node

組件目錄內始終使用文件夾管理組件

在 components 目錄下的通用組件始終使用文件夾管理組件，並經過 index.js 暴露組件，建議使用如下文件結構：webpack

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

開啓路由懶加載

vue 路由懶加載其實依賴於 webpack 的 code-spliting 以及 vue 的異步組件，關於 vue 的異步組件能夠看動態組件 & 異步組件，而異步組依賴動態 import。git

模塊化路由配置

在中大型項目中，會有不少的頁面或模塊，常出現路由嵌套的狀況。此時，建議以路由層級進行模塊拆分。文件結構以下：github

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

將一級路由配置在入口文件 index.js 中，將一級路由下的二級路由拆分爲獨立的模塊：web

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處理函數的配置對象。

化繁爲簡的計算屬性

將複雜計算屬性分割爲儘量多的更簡單的屬性。簡單、專一的計算屬性減小了信息使用時的假設性限制，因此需求變動時也用不着那麼多重構了。如：

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