The author xiaosan is a full stack engineer who just graduated from the university. The technical article written is basically made up of notes during the learning process. If you like it after reading it, you can give a little praise to my little brother.
Exception little brother also has a programmer exchange group, welcome everyone to touch fish.Click add group

Usually we in the development and maintenance of the project process, if we run the project is a little big ah, or too much data, resulting in the project to run a snail even slower, and then user experience is not friendly, for novice programmers! The boss wants you to work overtime every day! You dare not quit! This kind of time, very let a person have a headache, how to do!

But! It’s not impossible! SAO years! That’s not what you said when you learned vUE!

Let me give you some tips to optimize your performance and make your projects fly! The boss saw all call expert!

1. Distinguish between v-if and V-show scenarios

V-if is conditional rendering, when the condition is satisfied, it must be rendering wow! If you need to set an element to hide or disappear at any time, using V-if is a waste of performance because it is constantly being created and destroyed.

But it is also inert, if you start to give it false condition, it will be shy not to come out, like your girlfriend every night do not go home with you, and even your home do not have your girlfriend’s clothes! Then the structure page will not render out, can not find this element, unwitting friends think you talked about a virtual girlfriend, until you make it true, it does not start rendering, that is, to take the marriage certificate with you home.

V-show is very simple, and the idea is to use the display property of the CSS to hide or show it, so even if we don’t see it at the beginning of the rendering, it’s actually there in the document, just because display: None; The hidden.

It’s like your pep talk girlfriend. You don’t dare pep talk to someone! Must be such as the dead of night, just secretly pump up, and then continue to put gas reservoirs in the morning, so is not very convenient! So this element you are also your girlfriend every day to pump air, is not so laborious! During the day, you can hide and go to work happily!

All right, here we go! Don’t think blind chicken what girlfriend, girlfriend will only affect the speed of my code project!

In this case, it is recommended to use V-if if the rendering or destruction conditions are rarely changed, but v-show is more suitable for scenes that need to be constantly switched on and off, appearing and disappearing! Therefore, applying V-IF and V-show properly in these scenarios can save a lot of performance to achieve performance optimization.

2. V-if and V-for cannot be used together

When v-if is used with V-for, v-for **** has a higher priority than V-if. This means that V-IF will run separately in each V-FOR cycle, that is, run the V-FOR cycle first, and then compare the CONDITIONS of V-IF in each V-FOR cycle, which will cause performance waste and affect the speed of the project.

If you write it like this (I wrote it in Vue3), boy! Direct does not work, no error and no page, very weird

<template> <div id="app"> <div v-for="item in list" v-if="list.flag" :key="item">{{item.color}}</div> </div> </template>  <script> export default { data(){ return{ list:[ { color:"red", flag:true }, { color:"green", flag:false }, { color:"blue", flag:true }, ], } }} </script>Copy the code

When you do need to render a page based on conditions, the recommendation is to use computed properties, which are efficient and aesthetically pleasing without causing problems, as shown in the code below

<template>
  <div id="app">
        <div v-for="item in newList" :key="item">{{item.color}}</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
       list:[
            {
                color:"red",
                flag:true
            },
            {
                color:"green",
                flag:false
            },
            {
                color:"blue",
                flag:true
            },
        ],
    }
  },
  computed:{
    newList(){
      return this.list.filter(list => {
        return list.flag
      })
    }
  }
  }
</script>
Copy the code

Use puted and watch in different scenarios

Take a look at the computed property, which supports caching and recalculation when dependent data changes, but it does not support asynchronous operations and cannot listen for data changes. And the calculated properties are cached based on reactive dependencies.

Looking at the listening property Watch, which does not support caching, it supports asynchronous operations, which is most useful when asynchronous or expensive operations need to be performed when data changes. This is the biggest difference between computed and computed.

So, if your requirements are written like a shopping cart, one attribute is affected by other attributes, use computed attributes. Like your home of two ha, you don’t take it to go out to play, you came home and found that your home can be torn down by two ha, because you don’t take it out to go shopping with your girlfriend!

If you are writing something like a fuzzy query, you can use the listening property Watch because one piece of data can affect more than one piece of data. For example, you bought a lot of things for your girlfriend on Double 12. After double 12, do you have many opportunities to go back to the dormitory?

Use these two to make your code more efficient, look more elegant, and get projects moving! This is all a way to optimize performance!

4. Lazy route loading

When the Vue project is a single page application, there may be a lot of route introduction, so that the file packaged with WebPCAk will be very large, when entering the home page for the first time, there are a lot of loaded resources, sometimes the page will appear a white screen, which is very unfriendly to users and poor experience.

However, it is more efficient to divide the components of different routes into different code blocks and then load the components when the routes are accessed. This will greatly increase the speed of the first screen, but may slow down the rest of the page. It has both advantages and disadvantages. It is also very simple to implement according to your business needs, as shown in the index.js file of the router

import Home from '.. /views/Home' const routes = [{path:'/ Home', name:"Home", // Component :()=>import(/*webpackChunkName:"about"*/ '../views/ about.vue ')}]Copy the code

When I open the browser and run it, when I don’t click on the About component, the size of the package is like the one in blue. When I click on the About component, I add the package circled in red. The total size is increased

Therefore, using route lazy loading can reduce the performance consumption of the first load, but the later opening of these components may be slowed down. It is recommended that if the page is not large and does not need to be displayed immediately, use route lazy loading to reduce the performance consumption, so as to achieve performance optimization!

5. Import third-party plug-ins as required

We work on a project, for example, if it is the global introduction of third-party plug-ins, package build, others the plug-in unit and will be packaged together, so that the file is very large, and then we need to introduce the third-party plug-in on-demand, this needs to according to the official document in the project configuration each plug-in, is always in a word, use what bring what!

6. Optimize list data

When we get to things that are very large in the beginning and then have to render on the page, like giving you 10W pieces of data all at once and rendering on the page, it’s very difficult to render the project all at once.

At this point, we need to use windowing techniques to optimize performance, rendering only a small portion of the content (such as how many pieces of data are taken at once), thus reducing the time to re-render components and create DOM nodes. Look at the following code

< the template > < div class = "list" > < h3 > list of lazy loading < / h3 > < div > < div v - for = "item in the list" > < div > {{item}} < / div > < / div > < / div > < div > <div v-if="moreShowBoolen"> Scroll load more </div> <div V-else > No more </div> </div> </div> </template> <script> export default { name: 'List', data() { return { list: [], moreShowBoolen: false, nowPage: 1, scrollHeight: 0, }; }, mounted() { this.init(); / / the document. The documentElement. ScrollTop the position of the scroll bar for current page documentElement corresponding is HTML tags, the body is corresponding to the body tag / / Document.com patMode is used to determine the rendering mode used by the current browser. CSS1Compat indicates standard compatibility mode. Open window.addEventListener("scroll", () => { let scrollY=document.documentElement.scrollTop || document.body.scrollTop; Let vh=document.compatMode === "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight; / / page visual height let allHeight = math.h Max (document. Body. ScrollHeight, document. DocumentElement. ScrollHeight); If (scrollY + vh >= allHeight) {if (scrollY + vh >= allHeight) {this.init2(); }}); }, methods: {init() {// Add data to list for (let I = 0; i < 100; i++) { this.list.push(i); } }, init2() { for (let i = 0; i < 200; I ++) {// While sliding to the bottom, continue firing this.list.push(I); ,}}}}; </script>Copy the code

In this case, you can do lazy data loading, according to the need, gradually add data in, reduce the one-time pull all data, because the data is very large, so you can optimize a lot of performance!