VUE ElementUI 項目總結

項目簡介

vue + axios + vue-router + vuex + ElementUI

vue

vue數據更新，視圖不更新

只有當實例被建立時 data 中存在的屬性纔是響應式的，Vue 不能檢測對象屬性的添加或刪除；
可使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性

Vue.set(vm.userProfile, 'age', 27)
this.$set(this.transportAddData.serviceOrderList[a].serviceOrderItems[i], 'deletePoundIds', [])
複製代碼

vue 數據與方法
vue 對象更改檢測注意事項

Vue 不能檢測如下變更的數組：

• 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
• 當你修改數組的長度時，例如：vm.items.length = newLength

vue 數組更新檢測

持續觸發事件的優化

持續觸發某個事件能夠用函數的節流和防抖來作性能優化

//防抖
function(){  
    ...
    
    clearTimeout(timeoutId);

    timeoutId = setTimeout(function () {
      console.log('content', content);
      player(content.msgTypeId, comId)
    }, 500);
    
    ...
    
}

// 節流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閒，若是在執行中，則直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數節流");
        canRun = true;
    }, 300);
};

複製代碼

javaScript的Throttling(節流)和Debouncing(防抖）

nextTick

在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

get() {
    this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素，我想把第一個li顏色變爲紅色
        document.querySelectorAll('li')[0].style.color = 'red'  //這裏會報錯-，由於尚未 li
        
        this.$nextTick( ()=> {
            document.querySelectorAll('li')[0].style.color = 'red'
        })
    })
},
複製代碼

Vue.nextTick 的原理和用途

音頻文件自動播放報錯

谷歌瀏覽器（Chrome 66）音頻自動播放報錯

DOMException: play() failed because the user didn’t interact with the document first.
複製代碼

解決方案：AudioContext

// Chrome
request.get('/baseConfig/messageAudio/play', {
    params: {
        "comId": Cookies.get('comId'),
        "msgTypeId": id
    },
    responseType: 'arraybuffer'   // 這裏須要設置xhr response的格式爲arraybuffer
    })
    .then(req => {
    
    ...
    
        let context = new (window.AudioContext || window.webkitAudioContext)();
        context.decodeAudioData(req.data, decode => play(context, decode));
                  
        function play (context, decodeBuffer) {
            sourceadio = context.createBufferSource();
            sourceadio.buffer = decodeBuffer;
            sourceadio.connect(context.destination);
            // 從0s開始播放
            sourceadio.start(0);
        }
    
    ...
    
})
複製代碼

Chrome 66禁止聲音自動播放以後
AudioContext
AudioContext.decodeAudioData()

vuex

使用vuex修改state的方法和區別

• 能夠直接使用 this.$store.state.變量 = xxx;
• this.store.commit(commitType, payload)

相同點：可以修改state裏的變量，而且是響應式的（能觸發視圖更新）
不一樣點： 若將vue建立 store 的時候傳入 strict: true, 開啓嚴格模式，那麼任何修改state的操做，只要不通過 mutation的函數，vue就會報以下錯

throw error :    [vuex] Do not mutate vuex store state outside mutation handlers。
複製代碼

使用commit提交到mutation修改state的優勢：vuex可以記錄每一次state的變化記錄，保存狀態快照，實現時間漫遊／回滾之類的操做。

dispatch 和 commit的區別在於:
使用dispatch是異步操做， commit是同步操做，
因此 通常狀況下，推薦直接使用commit，即 this.$store.commit(commitType, payload)，以防異步操做會帶來的延遲問題。

vuex strict
vuex Mutation
vuex actions

vuex究竟是什麼

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
複製代碼

==vuex中的state本質上是沒有template的隱藏的vue組件。==

vuex工做原理詳解

axios

兼容問題

Edge 41.16299.15.0 post請求會自動轉爲get

microsoft-edge/platform/issues
vue 使用axios 在EDGE瀏覽器上面post請求變成了get請求

取消請求

場景：每次請求在攔截器中添加token，後臺判斷token是否過時；當進入一個頁面時觸發屢次請求，且正好token已通過期。這個時候須要第一次請求完成以後知道token已通過期則彈出提示、頁面跳轉到登陸、中止以後的請求；不然會由於屢次請求和axios響應攔截而屢次彈框提示。

• 解決方案
  axios自帶cancelToken 取消方法，而後在路由跳轉後中止以前的請求

// 請求攔截中 添加 cancelToken
axios.interceptors.request.use(config => {
    config.cancelToken = store.source.token
    return config
}, err => {
    return Promise.reject(err)
})
 
// 路由跳轉中進行判斷
router.beforeEach((to, from, next) => {
    const CancelToken = axios.CancelToken
    store.source.cancel && store.source.cancel()
    store.source = CancelToken.source()
    next()
})


//sort文件/
state: {
    source: {
      token: null,
      cancel: null
    }
  }
複製代碼

axios api
路由變化時使用axios取消全部請求
vue項目中 axios請求攔截器與取消pending請求功能

存在問題： 若是 token過時提示彈框爲二次確認彈框，再次確認以後纔會進行頁面跳轉，那麼在點擊確認以前，頁面中以前的請求仍是會繼續進行；
解決方案：給彈窗添加全局狀態，根據狀態判斷是否須要彈出彈框

預檢請求

CORS跨域
CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，==IE瀏覽器不能低於IE10。==
瀏覽器將CORS請求分紅兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

• 簡單請求

1. 請求方法是如下三種方法之一：
   HEAD
   GET
   POST
2. HTTP的頭信息不超出如下幾種字段： Accept
   Accept-Language
   Content-Language
   Last-Event-ID
   Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

簡單請求不會觸發 CORS 預檢請求。

• 非簡單請求

當請求知足下述任一條件時，即爲非簡單請求：

1. 使用了下面任一 HTTP 方法：
   PUT
   DELETE
   CONNECT
   OPTIONS
   TRACE
   PATCH
2. 人爲設置了對 CORS 安全的首部字段集合以外的其餘首部字段。該集合爲： Accept Accept-Language Content-Language Content-Type (but note the additional requirements below) DPR Downlink Save-Data Viewport-Width Width
3. Content-Type 的值不屬於下列之一:
   application/x-www-form-urlencoded
   multipart/form-data
   text/plain
4. 請求中的XMLHttpRequestUpload 對象註冊了任意多個事件監聽器。
5. 請求中使用了ReadableStream對象。

HTTP訪問控制（CORS）

• 預檢請求

非簡單請求，會在正式通訊以前，增長一次HTTP OPTIONS方法發起的查詢請求，稱爲"預檢"請求（preflight）。以獲知服務器是否容許該實際請求。 "預檢請求「的使用，能夠避免跨域請求對服務器的用戶數據產生未預期的影響。
==該方法不會對服務器資源產生影響==

• 優化方案

Access-Control-Max-Age: <delta-seconds> //單位是秒。
複製代碼

表示 preflight request （預檢請求）的返回結果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 能夠被緩存多久

Vue Router

push、replace的區別

push會向history添加新的記錄，replace只是替換掉原來的記錄，不會添加新的記錄； 這就致使了用replace方法跳轉的頁面是沒法回到以前的頁面的；(相似window.history)

vue Router 編程式的導航

路由懶加載

爲了提高頁面加載速度，實現按需加載，也就是當路由訪問時才加載對應組件，咱們能夠結合vue的異步組件和webpack的代碼分割功能來實現路由的懶加載。

{
    path: '/iov/login',
    name: '登陸',
    component: resolve => require(['@/views/login/login'], resolve),
},
{
    path:'/iov/organization',
    name:'組織管理',
    component:() => import('@/views/enterprise/organization')
}
複製代碼

vue Router 路由懶加載
vue 異步組件
vue + vue-router 懶加載 import / resolve+require

elementUI

表單彈窗中 elementform 清除驗證殘留提示

給表單添加不一樣的 ref （REFNAME），若是有相同的ref 會致使殘留驗證提示清除失敗

this.dialogTranspor = true
    //彈窗打開後 dom 沒有生成，全部要用 this.$nextTick
   
    this.$nextTick(function () {
     
        this.$refs.REFNAME.resetFields();

      })
複製代碼

頁碼數沒法正常顯示

場景：列表頁在跳到詳情或其餘頁面後再返回列表頁，沒法正常顯示對應頁數（頁碼數放在state中），但請求的數據時正常的;

解決方案：頁碼數、總頁數必需要在同一個對象中，不然當前頁碼數不能正常顯示

data() {
    return {
        //完成查詢條件
        searchComplate: {        
        "comId": Cookies.get('comId'),
        "transportOrderCode": null,
        "orderCode": null,
        "customerId": null,
        "abnormal": 2,
        "startTime": null,
        "endTime": null,
        "pageNum": 1,
        "pageSize": 20,
        total: 0,
        currentRow: '',
        dataArea: ['', ''],
        activeName: '',
        expands: []
        },
    }
}
複製代碼

動態多級表單驗證

<li v-for="(item,index) in transportAddData.serviceOrderList">
 
    <template v-for="(subItem,subIndex) in item.serviceOrderItems">
    
        <tr >
                    
            <td>
              <el-form-item :prop="'serviceOrderList.'+index+'.serviceOrderItems.' + subIndex + '.addressName'"
                            :rules="{required: true, message: '卸貨地不能爲空', trigger: 'blur'}">
                <el-input v-model="subItem.addressName" placeholder="地址"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item :prop="'serviceOrderList.'+index+'.serviceOrderItems.' + subIndex + '.planTonnage'"
                            :rules="[{required: true, message: '必填項', trigger: 'blur'},{pattern: /^((([1-9]+(\d+)?)(\.\d+)?)|(0\.\d+))$/, message: '必須爲正數且不爲0'}]">
                <el-input v-model="subItem.planTonnage"
                          placeholder="預卸噸數"></el-input>
              </el-form-item>
            </td>
            ...
            
        </tr>
        
    </template>

</li>
複製代碼