Vue2.5 去哪兒App項目學習【二】

在項目學習中所遇到的知識點總結

使用到的一系列Git指令

• 查看git狀態：git status
• 提交項目到git上：

1. git add .    將項目添加到緩存
2. git commit -m 'xxxx'   將暫存區內容添加到本地倉庫
3. git push 將本地分支的更新,推送到遠程主機

• 分支的建立/切換/合併

1. 建立新分支：git checkout -b 分支名  
2. 切換分支：git checkout 分支名
3. 合併分支:git merge 分支名

實現頁面緩存

利用Vue中keep-alive，快速實現頁面緩存。

keep-alive是一個抽象組件：它自身不會渲染一個DOM元素，也不會出如今父組件鏈中；使用keep-alive包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。

例如：

<template>
  <div id="app">
    <!-- 除了Detail頁面外其餘頁面作緩存 -->
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
  </div>
</template>

keep-alive會緩存命中的組件；exclude定義緩存黑名單，被命中的組件將不會被緩存。

在App.vue文件中使用了<keep-alive>標籤，而後再利用每一個頁面的生命週期判斷是否再次發起http請求實現頁面緩存。

當組件被keep-alive緩存的時候，會出現2個生命週期鉤子函數：

1. activated：只要頁面一被展現，就會執行

2. deactivated：只要頁面即將被隱藏或替換成新頁面，就會執行

 

router-link替換指定標籤

router-link默認渲染成帶有正確連接的 <a> 標籤，能夠經過配置 tag 屬性生成別的標籤。

對全局事件的解綁

當事件是綁定在全局window對象上的時候，其餘組件也會受到影響。爲了不這種影響，須要對全局事件解綁。

因爲在項目的App.vue使用了keep-alive，因此能夠在activated和deactivated這兩個鉤子函數中分別完成對全局事件的綁定和解綁。

activated() {
    window.addEventListener('scroll', this.handleScroll);
  },
  deactivated() {
    window.removeEventListener('scroll', this.handleScroll);
  },

 單文件組件中name值的做用

<script>
export default {
  name: 'Home',
}
</script>

• 給<keep-alive>設置exclude的值，這個值就是name，這樣能夠不緩存此頁面
• 遞歸組件的調用，如

<template>
  <div>
    <div
      class="item"
      v-for="(item, index) of list"
      :key="index"
    >
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{item.title}}
      </div>
      <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

• 在使用 Vue.js devtools 調試工具時，用來顯示組件的名字

函數節流

var timer = null;
 
handleTouchMove () {
    if (timer) {
        clearTimeout(timer)
    }
    this.timer = setTimeout(() => {
        // 執行的操做
    }, 16)
}

函數節流的要點：聲明一個變量(timer)當標誌位，記錄當前代碼是否在執行。若是空閒(即timer爲true)，則能夠正常觸發方法執行。若是代碼正在執行，則取消此次方法執行，直接return，這樣就能夠作到函數減小執行頻率。

使用異步組件

使用異步組件會將js拆分，當使用到當前組件時才加載當前組件的js，而不是首屏加載全部的整合了全部js邏輯的js文件。這在js比較大（至少超多1MB）時使用比較合適，不然增長了http請求。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      // 異步加載
      component: () => import('@/pages/home/Home')
    },
    {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City')
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('@/pages/detail/Detail')
    }
  ],
  // 每次切換到新路由時，頁面滾到頂部
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

除了在router.js中配置異步組件外，也能在相應頁面的components中設置異步組件

// import HomeHeader from './components/Header'
export default {
  name: 'Home',
  components: {
    // HomeHeader,
    HomeHeader: () => import('./components/Header'),
  },
}

 項目整體效果圖

• 首頁

• 城市選擇頁面

• 詳情頁面

項目地址

https://github.com/Small-Windmill/travel.git