Vue2.5 去哪儿App项目学习【二】

在项目学习中所遇到的知识点总结

使用到的一系列Git指令

查看git状态：git status
提交项目到git上：

git add . 将项目添加到缓存
git commit -m 'xxxx' 将暂存区内容添加到本地仓库
git push 将本地分支的更新,推送到远程主机

分支的创建/切换/合并

创建新分支：git checkout -b 分支名
切换分支：git checkout 分支名
合并分支:git merge 分支名

实现页面缓存

利用Vue中keep-alive，快速实现页面缓存。

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

例如：
<template>
  <div id="app">
    
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
  </div>
</template>
keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存。

在App.vue文件中使用了<keep-alive>标签，然后再利用每个页面的生命周期判断是否再次发起http请求实现页面缓存。

当组件被keep-alive缓存的时候，会出现2个生命周期钩子函数：

activated：只要页面一被展示，就会执行

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'),
  },
}