Vue2.x开发去哪网项目笔记

距离我完成这个去哪网项目时间已经过去有一个多月了，由于最近要面试就想把自己做的项目流程梳理一遍。
项目源码地址? ：https://github.com/CarrieZY/Vue

Vue2.x开发项目笔记

总结项目用到的

技术栈：

前端：

1. Vue 构建用户界面的 MVVM 框架，核心是响应的数据绑定和组系统件。
2. vue-router：为单页面应用提供的路由系统，项目上线前使用了路由懒加载技术，来异步加载路由优化性能。
3. vuex：Vue 集中状态管理，在多个组件共享某些状态时非常便捷。
4. axios：服务端通讯。基于 Promise 的网络请求插件
5. vue-lazyload：第三方图片懒加载库，优化页面加载速度vue-lazyload：第三方图片懒加载库，优化页面加载速度
6. better-scroll：iscroll 的优化版，使移动端滑动体验更加流畅better-scroll：iscroll 的优化版，使移动端滑动体验更加流畅
7. sass：css 预编译处理器sass：css 预编译处理器
8. ES6：ECMAScriptES6：ECMAScript
9. vue-awesome-swiper： 图片轮播插件
10. vue-awesome-swiper： 图片轮播插件 vue-awesome-swiper： 图片轮播插件
11. fastClick: 解决300毫秒点击事件延迟问题fastClick: 解决300毫秒点击事件延迟问题.

后端:使用data.json模拟的mack数据

技术点分析

当网速过慢的时候获取资源导致的页面抖动问题！！

如果网速过慢。比如一个dom中有图片、就会出现突然出现一张图片的问题。导致页面变化、这个时候如果是移动端我觉得可以加一个loading来处理这种问题（使用上面的vue-lazyload第三方的图片懒加载库）。同时也可以选择在一开始的时候就预留位置

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

这里的百分比是相对宽度的百分比，更具实际情况而定!

函数节流

函数节流：一个函数在执行一次后，只有大于设定的执行周期后，才会执行第二次。
在项目中使用better-scroll滚动插件时，我们可以设置节流来提高效率，比如滚动事件如果在一定时间内连续滚动则不进行处理，直到最后确定滚动出来了，这样能提高性能。常见解决方式是设置一个定时器来进行解决。

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)

优化 减少页面数据请求次数 keep-alive

使用keep-alive可以进行缓存，这样就不会每次进入相同的页面都会进行数据请求了，能提高用户体验、在使用keep-alive以后会多两个生命周期函数:activated以及deactivated，我们可以在这里进行一些判断操作，来决定是否需要缓存，是否需要执行数据获取。此外，如果我们是给整个路由router-view组件进行了keep-alive，并且在这里执行了一些exinclude设置。

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

城市列表的功能点完成

这个和我的上一篇笔记《Vue2.x开发goods页面（点击侧边导航滑动到当前位置）》逻辑功能实现相同 可以点开查看 （算是比较详细了）。

实现icon图导航区域的轮播

同样依赖于swiper插件实现，只不过通过计算出swiper-slide下面icon图标的个数，当多出一面导航的icon时 显示后面一面，出现轮播的效果。

computed:{
        //计算nav的icon
        pages(){
            const pages=[];
            this.items.forEach((item,index) =>{
                const page = Math.floor(index/8)
                if(!pages[page]){
                    pages[page]=[]
                } 
                pages[page].push(item)
            })
            return pages
            console.log(pages)
        }
    },

在swiper-silder中v-for循环数据

<swiper-slide v-for="(page,index) in pages" :key="index">
                   <div class="icons" v-for="item in page" :key="item.id"><img :src="item.src" alt=""><p>{{item.title}}</p></div>
                   </swiper-slide>

后续补充