Vue最佳實踐
Vue最佳實踐
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處理函式的配置物件。
化繁為簡的計算屬性
將複雜計算屬性分割為儘可能多的更簡單的屬性。簡單、專注的計算屬性減少了資訊使用時的假設性限制,所以需求變更時也用不著那麼多重構了。如:
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值。
歡迎有興趣的你加入本專案:Vue 最佳實踐
我的部落格即將同步至騰訊雲+社群,邀請大家一同入駐:https://cloud.tencent.com/developer/support-plan?invite_code=yko23c5fxauj