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 = [
,  ,  ]
export default new vuerouter()

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

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

export default ,
inheritattrs: false,
model: {},
props: {},
data () 
},computed: {},
watch: {},
// 生命週期鉤子，按呼叫順序編寫
beforecreate () {},
...,
destroyed () {},
methods: {},
directives: {},
filters: {},
// 使用render函式
時，置於末尾
render () {}
}

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

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

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

資源搜尋**大全

廣州vi設計公司

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

computed: 
}

簡化後：

computed: ,
discount: function () ,
finalprice: function () 
}

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

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

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

Vue最佳實踐

Vue最佳實踐

Vue最佳實踐文章學習

最佳實踐 Flutter 最佳實踐

Vue最佳實踐

Vue最佳實踐

Vue最佳實踐文章學習

最佳實踐 Flutter 最佳實踐

相關推薦