1、移動端300ms點擊延遲問題

在移動端web中會遇到300ms點擊延遲的問題，這個時候可以使用fastclick來解決這個問題。
引入fastclikc

import FastClick from ‘fastclick‘

使用fastclick

FastClick.attach(document.body)

2、註意當網速過慢的時候獲取資源導致的頁面抖動問題

如果網速過慢。比如一個dom中有圖片、就會出現突然出現一張圖片的問題。導致頁面變化、這個時候如果是移動端我覺得可以加一個loading來處理這種問題。同時在一開始的時候就預留位置

  overflow hidden
  width 25%
  height 0
  padding-bottom 25%
 

註意%、這裏的百分比是相對寬度的百分比，其比值為圖片的高寬比。

3、scoped穿透

如果我們給樣式設置了scoped，這個時候組件裏面的樣式既不能影響外部樣式，也不能比外部樣式所影響、如果我們有要影響我們所使用的子組件的樣式需求，我們需要進行穿透 query >>> query query為選擇器，例如:

.icons >>> .swiper-container
  overflow hidden
  height 0
  padding-bottom 50%

4、vue-awersome-swipper數據加載後直接顯示最後一頁問題。

使用axios獲取數據傳遞給輪播組件以後直接顯示了最後一頁，此時可以使用v-if來解決問題、因為在還沒有獲取到數據的時候是根據空的創建的

5、函數節流

在我們使用一些滾動事件的時候，我們可以設置節流來提高效率，比如滾動事件如果在一定時間內連續滾動則不進行處理，直到最後確定滾動出來了，這樣能提高性能。常見解決方式是設置一個定時器來進行解決

if (this.timer) {
  clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
  const touchY = e.touches[0].clientY - 79
  const index = Math.floor((touchY - this.startY) / 20)
  if (index >= 0 && index < this.letters.length) {
    this.$emit(‘chooseLetter‘, this.letters[index])
  
 
}
}, 16)

6、keep-alive

使用keep-alive可以進行緩存，這樣就不會每次進入相同的頁面都會進行數據請求了，能提高用戶體驗、在使用keep-alive以後會多兩個生命周期函數:activated以及deactivated，我們可以在這裏進行一些判斷操作，來決定是否需要緩存，是否需要執行數據獲取。此外，如果我們是給整個路由router-view組件進行了keep-alive，並且在這裏執行了一些exinclude設置

 <keep-alive exclude="Detail">
   <router-view/>
 </keep-alive>

那麽對應的裏面就沒有這兩個生命周期函數了，我們不能使用這兩個函數

7、swipperDOM結構變化導致的滾動問題

如果我們插入swipper中的DOM有所變化，那麽滾動效果就會變得非常的差，這個時候我們可以設置他的swipperOptions裏面的observeParents以及observer

 data () {
   return {
     swiperOption: {
       pagination: ‘.swiper-pagination‘,
       paginationType: ‘fraction‘,
       observeParents: true,
       observer: true
     }
   }
 },

8、全局事件

如果把事件綁定到window上面比如scroll事件，那麽在推出這個頁面的時候一定要進行解綁，不然在其他的頁面也會受到這個事件的影響，造成bug

  mounted () {
    window.addEventListener(‘scroll‘, this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener(‘scroll‘, this.handleScroll)
  }

9、滾動行為

如果我們的某個頁面是滾動的，切設置了keep-alive，那麽我們進入其他頁面返回的時候如果讀取了緩存，那麽這個緩存是包括滾動行為的，則原來頁面滾動到什麽位置現在也滾動到什麽位置如果我們不希望出現這種情況，可以在路由中設置滾動行為

scrollBehavior (to, from, savedPosition) {
   return { x: 0, y: 0 }
 }

10、組件name的作用

1、在遞歸組件中實用，即，我們在創建組件的時候就可以使用組件自身

2、keep-alive的exclude中實用，用來避免某些組件進入緩存

3、vue-devtools中的使用

個人感覺vue是一種簡單、但是約束性很強的框架，繁瑣，但是穩定、搭配一些開發工具其實很可以保證團隊代碼質量，但是寫起了確實有點煩，但是單文件結構很舒服，省去了很多的命名煩惱，但是也帶來了新的問題，以前進行樣式復用通過良好的css命名，而現在通過組件，怎麽編寫一個優秀的組件其實挺考驗人的

vue慕課網去哪兒實戰項目筆記