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的時候，咱們才建議這樣拆分。 複製代碼