前言

---

vue作為前端主流的3大框架之一，目前在國內有著非常廣泛的應用，由于其輕量和自底向上的漸進式設計思想，使其不僅僅被應用于PC系統(tǒng)，對于移動端，桌面軟件（electronjs）等也有廣泛的應用，與此誕生的優(yōu)秀的開源框架比如elementUI，iView， ant-design-vue等也極大的降低了開發(fā)者的開發(fā)成本，并極大的提高了開發(fā)效率。筆者最初接觸vue時也是使用的iview框架，親生體會之后確實非常易用且強大。

筆者曾經有兩年的vue項目經驗，基于vue做過移動端項目和PC端的ERP系統(tǒng)，雖然平時工作中采用的是react技術棧，但平時還是會積累很多vue相關的最佳實踐和做一些基于vue的開源項目，所以說總結vue的項目經驗我覺得是最好的成長，也希望給今年想接觸vue框架或想從事vue工作的朋友帶來一些經驗和思考。你將收獲：

• vue框架使用注意事項和最佳經驗
• vue項目配置經驗總結
• vue組件設計經驗總結
• vue項目架構與服務化探索

正文

---

本文不僅僅是總結一些vue使用踩過的一些坑和項目經驗，更多的是使用框架（vue/react）過程中的方法論和組件的設計思路，最后還會有一些個人對工程化的一些總結，希望有更多經驗的朋友們可以一起交流，探索vue的奧妙。

在開始文章之前，筆者建議大家對javascript, css, html基礎有一定的了解，因為會用框架不一定能很好的實現(xiàn)業(yè)務需求和功能，要想實現(xiàn)不同場景下不同復雜度的需求，一定要對web基礎有充足的了解，所以希望大家熟悉如下基礎知識，如果不太熟悉可以花時間研究了解一下。

javascript：

• 數(shù)組常用方法的使用，比如遍歷有forEach，map，filter，every， some，reduce，操作方法有splice，slice， join，push，shift， pop，sort等
• 基本數(shù)據(jù)結構，引用類型（對象，數(shù)組）
• 基本邏輯運算if else， switch，三目運算：？，for/while循環(huán)等
• 字符串常見api（如replace，slice， substr，indexOf）
• 基本正則使用
• 變量作用域，作用域鏈，變量提升，函數(shù)聲明提升
• 對象基本用法，面向對象編程

css：

• 基本盒模型（border/content/padding等）
• 4種常用定位（static/absolute/relative/fixed）
• 常用布局方式（浮動布局/彈性布局flex/自適應布局/網格布局grid）
• css3基本樣式與動畫（transition，animation）

html：

• 新標簽基本用法和使用
• head標簽作用與用法（主要是meta屬性的用法）

所以希望大家掌握好以上基礎知識，也是前端開發(fā)的基礎，接下來我們直接進入正文。

1.vue框架使用注意事項和最佳經驗

vue學習最快的方式就是實踐，根據(jù)官網多寫幾個例子是掌握vue最快的方式。 接下來筆者就來總結一下在開發(fā)vue項目中的一些實踐經驗。

1.1 vue生命周期以及不同生命周期下的應用：

以上是vue官網上的生命周期的方法，大致劃分一下分為創(chuàng)建前/后，掛載前/后，更新前/后，銷毀前/后這四個階段。各個階段的狀態(tài)總結如下：

• beforeCreate：在beforeCreate生命周期執(zhí)行時，data和methods中的數(shù)據(jù)還未初始化，所以此時不能使用data中的數(shù)據(jù)和methods中的方法
• created：data 和 methods初始化完畢，此時可以使用methods 中的方法和data 中的數(shù)據(jù)
• beforeMount：template模版已經編譯好，但還未掛載到頁面，此時頁面還是上一個狀態(tài)
• mounted：此時Vue實例初始化完成了，DOM掛載完畢，可以直接操作dom或者使用第三發(fā)dom庫
• beforeUpdate： 此時data已更新，但還未同步頁面
• updated：data和頁面都已經更新完成
• beforeDestory：Vue實例進入銷毀階段，但所有的 data 和 methods ，指令， 過濾器等都處于可用狀態(tài)
• destroyed： 此時組件已經被銷毀，data，methods等都不可用

根據(jù)以上介紹，頁面第一次加載時會執(zhí)行 beforeCreate， created， beforeMount， mounted這四個生命周期，所以我們一般在created階段處理http請求獲取數(shù)據(jù)或者對data做一定的處理， 我們會在mounted階段操作dom，比如使用jquery，或這其他第三方dom庫。其次，根據(jù)以上不同周期下數(shù)據(jù)和頁面狀態(tài)的不同，我們還可以做其他更多操作，所以說每個生命周期的發(fā)展狀態(tài)非常重要，一定要理解，這樣才能對vue有更多的控制權。1.2 vue常用的指令以及動態(tài)指令的使用：

指令 (Directives) 是帶有 v- 前綴的特殊屬性，vue常用的指令有：

• v-bind 用于響應式地更新 HTML屬性
• v-if 根據(jù)表達式的值的真假來決定是否插入/移除元素
• v-on 用于監(jiān)聽 DOM 事件
• v-show 用于決定是否展示該元素，底層通過display：none實現(xiàn)
• v-html 在dom內插入html內容
• v-for 循環(huán)
• v-text 渲染指定dom的內容文本
• v-cloak 和CSS規(guī)則如 [v-cloak] { display: none } 一起用，可以隱藏未編譯的 Mustache 標簽直到實例準備完畢

以上是比較常用的指令，具體用法就不一一舉例了，其中v-cloak主要是用來避免頁面加載時出現(xiàn)閃爍的問題，可以結合css的[v-cloak] { display: none }方式解決這一問題。關于指令的動態(tài)參數(shù)，使用也很簡單，雖然是2.6.0 新增的，但是方法很靈活，具體使用如下：

<a v-on:[eventName]="doSomething"> ... </a>

我們可以根據(jù)具體情況動態(tài)切換事件名，從而綁定統(tǒng)一個函數(shù)。

1.3 vue常用修飾符及作用：

事件修飾符

• stop 阻止事件冒泡
• .prevent 阻止事件默認行為
• .self 事件綁定的元素本身觸發(fā)時才觸發(fā)回調
• .once 事件只能觸發(fā)一次，第二次就不會觸發(fā)了
• .native 將一個vue組件變成一個普通的html，使其可以監(jiān)聽click等原生事件，具體使用如下：

<Tag @click.native="handleClick">ok</Tag>

2.表單修飾符

• .lazy 在輸入框輸入完內容，光標離開時才更新試圖
• .trim 過濾首尾空格
• .number 如果想輸入數(shù)字，那它就會限制你輸入的只能是數(shù)字，那就相當于沒有加.number

用法如下：

<input type="text" v-model.trim="value">

還有很多修飾符比如鍵盤，鼠標等修飾符，感興趣的大家可以自行學習研究；

1.4 組件之間，父子組件之間的通信方案

組件之間的通信方案：

• 通過事件總線(bus)，即通過發(fā)布訂閱的方式
• vuex

父子組件：

• 父組件通過prop向子組件傳遞數(shù)據(jù)
• 子組件綁定自定義事件，通過this.$emit(event,params) 來調用自定義事件
• 使用vue提供的 parent / children & ￥refs方法來通信

1.5 vue實現(xiàn)按需組件：

組件的按需加載是項目性能優(yōu)化的一個環(huán)節(jié)，也可以降低首屏渲染時間，筆者在項目中用到的組件按需加載的方式如下：

使用() => import(),具體代碼如下：

<template><div><ComponentA /><ComponentB /></div> </template> <script> const ComponentA = () => import('./ComponentA') const ComponentB = () => import('./ComponentB') export default {// ...components: {ComponentA, ComponentB },// ... } </script>

2. 使用resolve => require(['./ComponentA'], resolve)，使用方法如下：

<template><div><ComponentA /></div> </template> <script> const ComponentA = resolve => require(['./ComponentA'], resolve) export default {// ...components: {ComponentA},// ... } </script>

1.6 vuex的幾種屬性和作用，以及使用vuex的基本模式：

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。

vuex的基本工作模式如下圖所示：

state的改變完全由mutations控制， 我們也沒必要任何項目都使用vuex，對于中大型復雜項目而言，需要共享的狀態(tài)很多時，使用vuex才是最佳的選擇。接下來我將詳細介紹各api的概念和作用。

• state 單一狀態(tài)樹，用一個對象就包含了全部的應用層級狀態(tài)，并且作為一個唯一數(shù)據(jù)源而存在
• getters 就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算 比如如下案例：

const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)}} }) // 訪問getters里的屬性 this.$store.getters.doneTodos

• Mutation 更改 Vuex 的 store 中的狀態(tài)的唯一方法，使用案例如下：

const store = new Vuex.Store({state: {num: 1},mutations: {add (state) {// 變更狀態(tài)state.num++}} })// 在項目中使用mutation store.commit('add') // 添加額外參數(shù) store.commit('add', 10)

• Action Action 提交的是mutation，而不是直接變更狀態(tài)，可以包含任意異步操作，具體用法如下：

const store = new Vuex.Store({state: {num: 0},mutations: {add (state) {state.num++}},actions: {add (context) {context.commit('add')},asyncAdd ({ commit }) {setTimeout(() => {commit('add')}} }) // 分發(fā)action store.dispatch('add') // 異步action store.dispatch('asyncAdd') // 異步傳參 store.dispatch('asyncAdd', { num: 10 })

• Moudule 將store分割成模塊（module）。每個模塊擁有自已的state、mutation、action、getter、甚至是嵌套子模塊；

筆者更具體實際經驗總結了一套標準使用模塊，就拿筆者之前的開源XPXMS舉例，如下：

總結

以上是生活随笔為你收集整理的ant design vue table 高度自适应_2年Vue项目实战经验汇总！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。