vue項目筆記

本文主要對vue項目研發中的問題積累及解決思路記錄，若有問題或者更好的解決方案，請指點下
一、 vue多重請求異步問題。

解決方案：1.迭代轉同步    影響運行速度，效率較低；
      2.promise.all(iterable) ：依舊是異步實現，效率相同  =》參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

二、 vue-router 切換

先加載新的組件，等新的組件渲染好但還沒掛載前，銷燬舊組件，掛載新組件；
    新組件： beforeCreate
    新組件： created
    新組件： beforeMount
    舊組件： beforeDestroy
    舊組件： destroy
    新組件： mounted
 Ps：跨組件傳值儘可能使用vuex;

三、 vue 數據傳遞 => https://blog.csdn.net/sinat_1...

vuex  props   eventBus

四、 數組更新檢測

Push（）能夠直接更新到頁面
 使用索引賦值或者改變數組長度時可使用$set或splice（）方法。
 ‘=’賦值可以使用nextTick()函數

五、 vue排坑之this

通常使用箭頭函數，普通的function須要觀察this對象指向。
Axios請求時this指向不是vue而是undefined
原始寫法：bind(this) 》》》改變匿名函數的指向對象
      Hack寫法 》》》var _this = this;
現寫法：箭頭函數  ==》
原理：es6箭頭函數中的內部this是詞法做用域，由上下文肯定（即外層調用者vue）

六、 position: sticky CSS樣式技巧 頁面上劃懸浮標題

七、 動態樣式綁定

v-bind:class="['tab-button', { active: currentTab === tab }]"  動態類名綁定，等同於addClassName  removeClassName;

八、 tab切換菜單 實現 ====》 動態組件 寫法案例：https://jsfiddle.net/o3nycadu...

<component
     v-bind:is="currentTabComponent"
     class="tab"
  ></component>
 <keep-alive> </keep-alive>  ==》用於組件不受v-if干擾，緩存組件原有狀態。也可在組件註冊時，能夠在組件後添加keepalive參數，方便作部分緩存。

九、 前端權限設置

Vue-router必需要在vue實例化以前掛載上去，vue2.0能夠經過addRoutes實現前端路由的動態改變。
  刷新新增頁面丟失的問題解決方案：一、將路由地址列表存在本地，加載以前判斷，無信息就從本地獲取，二、信息丟失從後臺從新獲取地址列表

十、 虛擬DOM

虛擬DOM能夠提升運行效率，避免js頻繁操做dom而產生的卡頓問題。
  參考文獻：https://www.cnblogs.com/fuGuy/p/9220106.html

十一、 大型spa項目狀態量方案：

A、    router屬性meta中傳入字面量對象
{path：'index',component:Index,meta:{showBtn:true}}
B、    設置全局狀態  :vuex

十二、 assets和static的區別

assets中存放的靜態文件是會通過webpack處理的，通常放一些圖片之類的靜態資源，而static則不會收到webpack的影響，調用的時候也是經過絕對路徑調用的，一般用來存放一些第三方的靜態資源庫。項目中調用static中的靜態資源時，可能會出現打包後加載失敗的問題。引用本地能夠將資源放在src下面，以免因爲打包後根目錄而致使地址變化的問題。

1三、 v-cloak： 防止頁面加載時出現 vuejs 的變量名。

1四、 table內tbody滾動（威易網CSS教程）
table tbody {

display:block;
height:195px;
overflow-y:scroll;

}
table thead, tbody tr {

display:table;
width:100%;
table-layout:fixed;

}
table thead {

width: calc( 100% - 1em )
}

1五、 js跳出循環

forEach()沒法在全部元素遍歷完以前終止循環，不支持break、continue關鍵字
 解決方案：renturn false能夠不執行當前循環指令如下的代碼，能夠充當continue；
    Try catch拋出異常可跳出循環，起到break的做用；

1六、Sass rem換算比率

@function rem($val){
  return $val/25*1rem
 }

1七、樣式穿透

css穿透使用 >>> 
  .form-item >>> .el-input__inner{
     height: 36px;
     line-height: 36px;
   }
 sass穿透 /deep/
 .form-item /deep/ .el-input__inner{
     height: 36px;
     line-height: 36px;
   }

1八、elementui table head邊界不對齊問題：

body .el-table th.gutter{display: table-cell!important;}