This paper mainly write Vue code level optimization.

Route lazy loading

const router = new VueRouter({
    routes: [{path: '/foo'.component: () = > import('./Foo.vue')}]})Copy the code

Reuse DOM using V-show

<template>
    <div class="cell">
    <! If you want to reuse the DOM using v-show instead of v-if
        <div v-show="value" class="on">
        <! -- Larger components -->
            <Heavy :n="10000"/>
        </div>
        <section v-show=! "" value" class="off">
            <Heavy :n="10000"/>
        </section>
    </div>
</template>
Copy the code

Keep-alive cache page

<template>
    <div id="app">
        <keep-alive>
            <router-view/>
        </keep-alive>
    </div>
</template>
Copy the code

See this article for details: Using Keep-Alive in Vue to quickly implement page caching

V-for traversal avoids using v-if simultaneously

Items that do not need to be displayed can be filtered out in advance by calculating attributes

<template>
  <ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>
<script>
export default {
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        returnuser.isActive; }); ,}}};</script>
Copy the code

Long list performance optimization

  • If the list is purely a data presentation and nothing changes, there is no need to be reactive

You can freeze objects using the object.freeze () method

export default {
  data: () = > ({
    users: []}),async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users); }};Copy the code
  • If it is a long list of big data, virtual scrolling can be used to render only a few areas of content

You can use virtual scrolling plug-ins such as vue-virtual-scroller and vue-virtual-scroll list

<recycle-scroller class="items" :items="items" :item-size="24">
    <template v-slot="{ item }">
      <FetchItemView :item="item" @vote="voteItem(item)" /> 
      </template>
  </recycle-scroller>
Copy the code

Events to destroy

When a Vue component is destroyed, all its instructions and event listeners are automatically unbound, but only for the component’s own events.

created() {
    this.timer = setInterval(this.refresh, 2000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
Copy the code

Lazy loading of images

For pages with too many pictures, in order to accelerate the page loading speed, we often need to not load the pictures that do not appear in the visual area of the page, and then load them after scrolling to the visual area. You can use the vue-LazyLoad image lazy loading plugin

<img v-lazy="/static/img/1.png">
Copy the code

Third-party plug-ins are introduced on demand

Third-party component libraries such as Element-UI can be introduced on demand to avoid being too bulky.

import Vue from 'vue';
import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)
Copy the code

See the official documents

Stateless components are marked as functional components

Suitable for displaying class components that have no instance state.

<template functional>
  <div class="cell">
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>
<script>
export default {
  props: ["value"]};</script>
Copy the code

Subcomponent segmentation

For time-consuming tasks. If there is dynamic content inside, it will change frequently and separate into separate components that will not affect the rest of the page, otherwise the whole page will need to be re-rendered.

<template>
  <div>
    <ChildComp />
  </div>
</template>
<script>
export default {
  components: {
    ChildComp: {
      methods: {
        heavy() {
          /* Time-consuming task */}},render(h) {
        return h("div".this.heavy()); }},}};</script>
Copy the code

Localization of variables

<template>
  <div :style="{ opacity: start / 300 }">
    {{ result }}
  </div>
</template>
<script>
import { heavy } from "@/utils";
export default {
  props: ["start"].computed: {
    base() {
      return 42;
    },
    result() {
      const base = this.base; // Don't refer to this.base too often
      let result = this.start;
      for (let i = 0; i < 1000; i++) {
        result += heavy(base);// This. Base is not referenced
      }
      returnresult; ,}}};</script>
Copy the code