關於Vue開發中的一些踩坑記錄(二)

一、導讀

本文少量涉及踩坑，更多涉及目前在vue+element得開發環境下得一些技巧以及潛在隱患做記錄。

二、踩坑&技巧

（一）善用CommonJS和ES6模塊規範

基於解藕得原則，很多時候我們會把每個模塊得請求封裝成一個js文件，然後再把各個js文件統一管理，那麼在導入api接口函數時可能會出現以下情況:

import { getLoraList } from "@/api/batch.js";
import {
  loraOn,
  loraOff,
  loraDimming,
  loraControlMode,
  getLoraRunMsg,
  setLoraTiming,
  loraLampOnLevel,
  loraLampOffLevel,
  loraTimeZone,
  loraPhotocellBrightess,
  loraLampOnTime,
  loraResetFactory,
  updateFirmware,
  progressPercent,
  loraSetBroadcast
} from "@/api/lora.js";
import { getTiming } from "@/api/batch.js";

這是ES6得模塊規範，但一旦調用的接口變多了，就難以管理並且每次手動import也略嫌麻煩，這時候應該採用CommonJS進行規範：

var batchApi = require("@/api/batch.js");
var loraApi = require("@/api/lora.js");
//調用時變成這樣
loraApi.loraDiming()

這樣代碼就變得更加簡潔，也省去了每個方法手動import的步驟。

（二）Element樹形表格懶加載用法

目前element更新到2.8版本，table已經很好地支持樹形數據的加載，但是關於樹形表格懶加載的示例說明少之又少，主要模糊在load回調函數該如何異步加載表格數據:

<el-table
  :data="tableData1"
   style="width: 100%"
   row-key="id"
   border
   lazy
   :load="load"
   ></el-table>

load(tree, treeNode, resolve) {
	let tableData = []
	this.getList().then(res=>{
	tableData = res.data
	})
        resolve(tableData ) //必須要把請求回來的數據放到resolve中，表格會自動加載
      }

（三）善用ES6\ES7特性進行數組操作

Vue3.0發佈前，我們依然需要依靠Object.defineProperty進行雙向綁定數據，但是很多時候Vue對數組的變化檢查是非常有侷限性的，我們要不使用Vue.set()方法進行提醒渲染視圖，要不重新賦值數組或調用某些數組方法觸發更新，ES6\ES7的許多新特性可以幫助我們:

//重新賦值數組觸發Vue更新視圖
let arr = [...arr]
//判斷數組是否包含某元素,返回布爾值
let hasValue = arr.includes(val)
//取數組最後一個元素,這種方法既避免了數組本身反轉，也減少了代碼量
let [last] = [...arr].reverse()