vue项目细节优化笔记

1、vue-awesome-swiper轮播图片在3G网络加载时,下面内容出现页面抖动

解决办法:
外层div添加class为wrapper

.wrapper{
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 32.5%;//其中32.5%为图片的宽高比
}

//或者方案2(部分浏览器不兼容)
.wrapper{
    width: 100%;
    height: 32.5vw; //其中vw相当于视口宽度的百分比
}

2、scoped样式限制的组件对其他组件样式修改

解决办法:
使用’>>>'对样式进行穿透



3、当flex:1布局中子元素使用超出出现省略号时,发现文档超出页面且未出现省略号

解决方案:
需要在flex:1的当前样式中添加min-width:0;

.flex{
    flex: 1;
    min-width:0; //解决超出不出现省略问题
}
.flex .flex-child{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

4、开发环境请求服务器数据的自动切换至本地mock数据

说明:vue-cli创建的项目只有static文件夹下的文件才可以被外部访问,故mock的数据是放在static文件夹下
请求如下:

当前组件


config文件夹下index.js配置文件

//假设本地static/mock文件夹下有index.json文件
dev: {
    porxyTable: {
        '/api': {
            target: 'http://localhost:8080', //服务器地址
            pathRewrite: {
                '^/pai': '/static/mock' //本地静态mock文件地址
            }
        }
    }
}

切记:修改配置文件需重启服务

5、页面滚动流畅切有弹性better scroll插件的使用

页面






better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
传送门

6、对touch重复执行的性能优化

说明:当touchmove事件或者滚动事件一直在执行,并且立即执行某些方法时非常消耗性能。优化原理是通过setTimeout延迟一定时间再执行,以减少执行次数,时间可设置16ms


7、使用keep-alive在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

例如缓存路由请求的数据


    

其中有两个参数

include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

注意:当使用keep-alive时会多出生命周期钩子activated、deactivated。使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。也就是说加上keep-alive再次访问页面时不会触发mounted但是会触发activated钩子函数

例如


8、全局对象的重复调用问题解决

**问题重现:**当组件中对window监听事件时,当前组件能触发事件,离开当前页面也还会触发该window事件
例如:


此处通过keep-alive的另一个生命钩子deactivated函数解除对window事件的监听,从而解决被其他组件调用的问题

9、一个组件滚动到某位置,其子组件也跟随滚动到某位置的问题解决

解决办法:
在main.js中创建router时使用scrollBehavior方法,代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/index'

const router = new VueRouter({
    router,
    mode: routerMode, //路由的模式
    scrollBehavior (to, from, savedPosition) {
        //回到最顶部
        return { x: 0, y: 0}
    }
})

同样可以根据此方法实现在后退时回到之前的滚动的位置的

代码如下:

//savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

同样也可以用此方法滚动到锚点位置

代码如下:

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

scrollBehavior具体用法传送门

你可能感兴趣的:(vue,js,技术积累,性能优化)