vue去哪儿项目总结

最新推荐文章于 2021-06-02 10:12:16 发布

小爱2

最新推荐文章于 2021-06-02 10:12:16 发布

阅读量220

点赞数

分类专栏： vue

vue 专栏收录该内容

7 篇文章

订阅专栏

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

在移动端web中会遇到300ms点击延迟的问题，这个时候可以使用fastclick来解决这个问题。
引入fastclikc

import FastClick from 'fastclick'

使用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、vue-awersome-swipper数据加载后直接显示最后一页问题。

使用axios获取数据传递给轮播组件以后直接显示了最后一页，此时可以使用v-if来解决问题、因为在还没有获取到数据的时候是根据空的创建的

5、函数节流

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

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)

6、keep-alive

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

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

那么对应的里面就没有这两个生命周期函数了，我们不能使用这两个函数

7、swipperDOM结构变化导致的滚动问题

如果我们插入swipper中的DOM有所变化，那么滚动效果就会变得非常的差，这个时候我们可以设置他的swipperOptions里面的observeParents以及observer

 data () {
   return {
     swiperOption: {
       pagination: '.swiper-pagination',
       paginationType: 'fraction',
       observeParents: true,
       observer: true
     }
   }
 },

8、全局事件

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

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

9、滚动行为

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

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

10、组件name的作用

1、在递归组件中实用，即，我们在创建组件的时候就可以使用组件自身
2、keep-alive的exclude中实用，用来避免某些组件进入缓存
3、vue-devtools中的使用

11 项目打包部署

1、通过ip地址访问环境，需要配置 --host 0.0.0.0

 "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

2、真实数据接口联调，需要修改proxy

proxyTable: {
        '/api':{
            target: 'http://127.0.0.1',//后台接口地址
            // pathRewrite: {
            //     '^/api': '/static/mock'
            // }
        }
    },

3、 assetsPublicPath: ‘/project’,//访问时，http://127.0.0.1:8080/project

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/project',//访问时，http://127.0.0.1:8080/project

assetsRoot : 在当前目录的上一级的 dist目录下输出资源文件
assetsSubDirectory: 把所有的静态资源打包到 dist下的 assets文件夹下
assetsPublicPath :代表生成的index.html文件，里面引入资源时，路径前面要加上 ./project

作者：特立独爬的蜗牛
链接：https://juejin.im/post/5bd9838df265da393c06033a
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
个人感觉vue是一种简单、但是约束性很强的框架，繁琐，但是稳定、搭配一些开发工具其实很可以保证团队代码质量，但是写起了确实有点烦，但是单文件结构很舒服，省去了很多的命名烦恼，但是也带来了新的问题，以前进行样式复用通过良好的css命名，而现在通过组件，怎么编写一个优秀的组件其实挺考验人的

转自：https://blog.youkuaiyun.com/mjh19930202/article/details/81385845