vue性能优化

1.updated

当页面传入的新的数据的时候，就重新渲染，
updated() {
    const startY = this.$refs['A'][0].offsetTop;
},
methods: {
    handleClickLetter (e) {
      this.$emit("change", e.target.innerText)
    },
    handleTouchStart (){
        this.touchStart = true;
    },
    handleTouchMove (e){
        if(this.touchStart){
            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("change", this.letters[index])
                }
            }, 16)
        }
}
复制代码

2.截流

定时器截流。
data() {
    return {
        touchStart: false,
        startY: 0,
        timer: null
    }
},

handleTouchMove (e){
    if(this.touchStart){
        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("change", this.letters[index])
            }
        }, 16)
    }
 }
复制代码

3.对全局事件的解绑

activated () {
    window.addEventListener(‘scroll’, this.handleScroll)// 对全局事件的绑定对别的也有影响。
}
解决
deactivated () {
   window.removeEventListener(‘scroll’, this.handleScroll)  
}
使用keep-alive后会多出这两个生命周期函数，离开时解绑
复制代码

4.移动端滚动问题

在某一个页面滚动后 切到别的页面，也同样滚动到了同样位置，在理由中写上如下代码，则可让其初始值均为0；
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
复制代码

5.ip地址可以直接访问项目

Package.json
    "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --fix --ext .js,.vue src",
    "build": "node build/build.js"
}
重点是 --host 0.0.0.0
复制代码

6.promise 兼容问题

babel-polyfill//解决白屏问题
npm install bable-polyfill —save
./main.js
import ‘babel-polyfill'
复制代码

7.打包优化

./config/index.js
复制代码

箭头处修改打包后的名字

8.异步组件

按需加载  ./router/index.js
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’)//按需加载
    }],
    scrollBehavior (to, from, savedPosition) {    
        return { x: 0, y: 0 }
    }
})
<!— 在组件中异步组件 —>
components: {
    DetailBanner: () => import(‘./components/Banner’)
}
//缺点：http请求会多次请求。当http请求变得特别大的时候，当app.js 打包后超过几mb的时候，我们才建议这样拆分。 
复制代码

转载于:https://juejin.im/post/5c18fd14f265da615e05666a