前言

---

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

筆者曾經(jīng)有兩年的vue項(xiàng)目經(jīng)驗(yàn)，基于vue做過(guò)移動(dòng)端項(xiàng)目和PC端的ERP系統(tǒng)，雖然平時(shí)工作中采用的是react技術(shù)棧，但平時(shí)還是會(huì)積累很多vue相關(guān)的最佳實(shí)踐和做一些基于vue的開(kāi)源項(xiàng)目，所以說(shuō)總結(jié)vue的項(xiàng)目經(jīng)驗(yàn)我覺(jué)得是最好的成長(zhǎng)，也希望給今年想接觸vue框架或想從事vue工作的朋友帶來(lái)一些經(jīng)驗(yàn)和思考。你將收獲：

• vue框架使用注意事項(xiàng)和最佳經(jīng)驗(yàn)
• vue項(xiàng)目配置經(jīng)驗(yàn)總結(jié)
• vue組件設(shè)計(jì)經(jīng)驗(yàn)總結(jié)
• vue項(xiàng)目架構(gòu)與服務(wù)化探索

正文

---

本文不僅僅是總結(jié)一些vue使用踩過(guò)的一些坑和項(xiàng)目經(jīng)驗(yàn)，更多的是使用框架（vue/react）過(guò)程中的方法論和組件的設(shè)計(jì)思路，最后還會(huì)有一些個(gè)人對(duì)工程化的一些總結(jié)，希望有更多經(jīng)驗(yàn)的朋友們可以一起交流，探索vue的奧妙。

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

javascript：

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

css：

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

html：

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

所以希望大家掌握好以上基礎(chǔ)知識(shí)，也是前端開(kāi)發(fā)的基礎(chǔ)，接下來(lái)我們直接進(jìn)入正文。

1.vue框架使用注意事項(xiàng)和最佳經(jīng)驗(yàn)

vue學(xué)習(xí)最快的方式就是實(shí)踐，根據(jù)官網(wǎng)多寫(xiě)幾個(gè)例子是掌握vue最快的方式。 接下來(lái)筆者就來(lái)總結(jié)一下在開(kāi)發(fā)vue項(xiàng)目中的一些實(shí)踐經(jīng)驗(yàn)。

1.1 vue生命周期以及不同生命周期下的應(yīng)用：

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

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

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

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

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

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

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

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

1.3 vue常用修飾符及作用：

事件修飾符

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

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

2.表單修飾符

• .lazy 在輸入框輸入完內(nèi)容，光標(biāo)離開(kāi)時(shí)才更新試圖
• .trim 過(guò)濾首尾空格
• .number 如果想輸入數(shù)字，那它就會(huì)限制你輸入的只能是數(shù)字，那就相當(dāng)于沒(méi)有加.number

用法如下：

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

還有很多修飾符比如鍵盤(pán)，鼠標(biāo)等修飾符，感興趣的大家可以自行學(xué)習(xí)研究；

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

組件之間的通信方案：

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

父子組件：

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

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

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

使用() => 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 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

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

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

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

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)}} }) // 訪問(wèn)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++}} })// 在項(xiàng)目中使用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）。每個(gè)模塊擁有自已的state、mutation、action、getter、甚至是嵌套子模塊；

筆者更具體實(shí)際經(jīng)驗(yàn)總結(jié)了一套標(biāo)準(zhǔn)使用模塊，就拿筆者之前的開(kāi)源XPXMS舉例，如下：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。