关于vue.js:Vue性能优化技巧

函数组件

因为组件的生命周期解决在框架层面上非常耗时，所以，倡议平时尽量应用函数型组件。这样，能够防止不必要的性能损失。只有在模板上申明functional属性，就能够实现函数式组件了：

<template functional>
    <div>
        <div v-if="value" class="on"></div>
        <section v-else class="off"></section>
    </div>
</template>

<script>
    export default {
        props: ['value']
    }
</script>

局部变量

平时在援用computed数据进行计算的时候，能够多应用局部变量，这样能够防止多次重复计算。

<template>
  <div :style="{ opacity: start / 300 }">{{ result }}</div>
</template>

<script>
export default {
  props: ['start'],
  computed: {
    base () {
      return 42
    },
    result () {
      // 赋值给局部变量，避免反复计算
      const base = this.base;
      let result = start
      for (let i = 0; i < 1000; i++) {
        result += Math.sqrt(Math.cos(Math.sin(base))) + base * base + base + base * 2 + base * 3
      }
      return result
    },
  },
}
</script>

活用v-show,缩小v-if

对于须要频繁切换的视图来说，应用v-show比v-if更加节约性能。因为v-show能够防止dom节点的销毁和重建

活用提早加载（defer)

<template>
  <div class="deferred-on">
    <VueIcon icon="fitness_center" class="gigantic"/>

    <h2>I'm an heavy page</h2>

    <template v-if="defer(2)">
      <Heavy v-for="n in 8" :key="n"/>
    </template>

    <Heavy v-if="defer(3)" class="super-heavy" :n="9999999"/>
  </div>
</template>

<script>
import Defer from '@/mixins/Defer'
export default {
  mixins: [
    Defer(),
  ],
}
</script>

Defer的实现

export default function (count = 10) {
  return {
    data () {
      return {
        displayPriority: 0
      }
    },

    mounted () {
      this.runDisplayPriority()
    },

    methods: {
      runDisplayPriority () {
        const step = () => {
          requestAnimationFrame(() => {
            this.displayPriority++
            if (this.displayPriority < count) {
              step()
            }
          })
        }
        step()
      },

      defer (priority) {
        return this.displayPriority >= priority
      }
    }
  }
}

分批解决(time slicing)

上面这个性能优化的点是前端通用的，能够用requestAnimationFrame分批次执行大数据量的计算,避免一次性执行的数据太大从而阻塞页面渲染。

比方上面这个例子：

fetchItems({ commit }, { items }) {
    commit('clearItems');
    commit('addItems', items)
}

能够改写为：

fetchItems({ commit }, { items, splitCount }) {
    commit('clearItems');
    //新建一个队列
    const queue = new JobQueue();
    splitArray(items, splitCount).forEach(chunk => queue.addJob(done => {
        // 分片
        requestAnimationFrame(() => {
            commit('addItems', chunk);
            done()
        });
    }));
    
    // 期待所有数据处理结束
    awiat queue.start();
}