VUE performance optimization tips

Function component

Because component lifecycle processing is time-consuming at the framework level, it is recommended that functional components be used as often as possible. In this way, unnecessary performance losses can be avoided. To implement a functional component, simply declare the functional property on the template:

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

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

A local variable

Often, when using computed data, you can use local variables to avoid repeated computations.

<template> <div :style="{ opacity: start / 300 }">{{ result }}</div> </template> <script> export default { props: ['start'], computed: {base () {return 42}, result () {// assign 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>

Use V-show more, reduce V-if

For views that need to be switched frequently, using V-Show is more performance efficient than V-If. Because V-Show can avoid DOM node destruction and reconstruction

Use deferred loading

<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>

The realization of the 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

The following point of performance optimization is front-end generic and allows you to perform large data volume calculations in batches using RequestAnimationFrame to prevent the page rendering from being blocked by performing too much data at once.

Take the following example:

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

This can be rewritten as:

fetchItems({ commit }, { items, splitCount }) { commit('clearItems'); // Create a new queue const Queue = new JobQueue(); splitArray(items, SplitCount).foreach (chunk => Queue. AddJob (done => {// Split requestAnimationFrame(() => {commit(' AddItems ', chunk); done() }); })); // wait for all data to be processed awiat queue.start(); }