Vue去哪儿网项目总结

1、移动端300ms点击延迟问题

在移动端web中会遇到300ms点击延迟的问题，这个时候可以使用fastclick来解决这个问题。
1)下载安装fastclikc：
npm install fastclikc

2)引入fastclikc：
import FastClick from 'fastclick'

3)使用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、函数节流

在我们使用一些滚动事件的时候，我们可以设置节流来提高效率，比如滚动事件如果在一定时间内连续滚动则不进行处理，直到最后确定滚动出来了，这样能提高性能。常见解决方式是设置一个定时器来进行解决。

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)

5、keep-alive来决定是否缓存

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

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

6、全局事件

如果把事件绑定到window上面比如scroll事件，那么在推出这个页面的时候一定要进行解绑，不然在其他的页面也会受到这个事件的影响，造成bug

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

7、设置元素的宽高比值固定

.wrapper
        overflow:hidden
        width:100%
        height:0
        padding-bottom:31.25%   //即高始终为宽的31.25%

8、如何自适应父元素剩余宽度

父元素display:flex布局，子元素flex:1;min-width:0，表示自适应父元素剩余的宽度，且不会超出父元素的宽度。

9、滚动行为

如果我们的某个页面是滚动的，切设置了keep-alive，那么我们进入其他页面返回的时候如果读取了缓存，那么这个缓存是包括滚动行为的，则原来页面滚动到什么位置现在也滚动到什么位置如果我们不希望出现这种情况，可以在路由中设置滚动行为

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

10、简化路径，为常用路径简化别名

例如：@/assets/css/可简化为css/
1）在build下webpack.base.conf.js文件下

resolve: {
                extensions: ['.js', '.vue', '.json'],
                alias: {
                  'vue$': 'vue/dist/vue.esm.js',
                  '@': resolve('src'),    //@这是src目录的别名
                  'css':resolve('src/css')   //这是src/css的别名，从而用csss替代src/css路径达到简化效果
                }
            }

2）重启项目：

vue run dev

11、vue项目的动画组件

1）新建一个动画组件anim.vue: <transition><slot></slot></transition>
2）然后在style里面定义.v-enter,.v-leave-to,.v-enter-active,.v-leave-active动画个个时刻的样式。
3）在其他组件用引入该动画组件，然后将需要执行动画效果的标签包裹在该动画组件标签中即可。