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"> <!-- 除了Detail页面外其他页面做缓存 --> <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'), }, }
项目总体效果图
- 首页
- 城市选择页面
- 详情页面