Vue project development process performance optimization

1. v-if and v-show distinguish usage scenarios;

v-if is suitable for scenarios that rarely change conditions at runtime and do not require frequent switching of conditions; v-show is suitable for scenarios that require very frequent switching of conditions

2. Differentiate usage scenarios between computed and watch

When we need to perform numerical calculations and depend on other data, we should use computed, because we can take advantage of the caching feature of computed to avoid recalculation every time we get a value;

Watch should be used when we need to perform asynchronous or expensive operations when data changes, using the watch option allows us to perform asynchronous operations (access an API), limit how often we perform the operation, and wait until we get the final result , set the intermediate state. These are all things that computed properties cannot do.

3. The v-for traversal must add a key to the item, and avoid using v-if at the same time

When the list data is traversed and rendered, it is necessary to set a unique key value for each item, so that the internal mechanism of Vue.js can accurately find the list data. When the state is updated, the new state value is compared with the old state value to locate the diff faster. v-for has higher priority than v-if. If it needs to traverse the entire array every time, it will affect the speed, especially when it needs to render a small part, it should be replaced with the computed property if necessary.

4. Long list performance optimization

Sometimes our components are purely data display, and there will be no changes. In order to reduce the initialization time of components, an object can be frozen by the Object.freeze method. Once the frozen object can no longer be modified.

export default { data: () => ({ users: {} }), async created() { const users = await axios.get("/api/users"); this.users = Object.freeze(users); } };

5. Event destruction

Using addEventListene and other methods in js will not be automatically destroyed. We need to manually remove the listeners of these events when the component is destroyed to avoid memory leaks, such as:

created() { addEventListener('click', this.click, false) }, beforeDestroy() { removeEventListener('click', this.click, false) }

6. Lazy loading of image resources

Use Vue's vue-lazyload plugin:

1. Install the plugin

npm install vue-lazyload --save-dev      
复制代码

2. Introduce and use in main.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)          
复制代码

3. Customize usage options (optional)

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
复制代码

4. Use (change the src attribute of the img tag directly to v-lazy)

<img v-lazy="/static/img/1.png">              
复制代码

7. Routing lazy loading

It is more efficient to divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed. This will increase the speed of the display above the fold

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
复制代码

8. On-demand introduction of third-party plug-ins

With the help of babel-plugin-component, then only the required components can be introduced to achieve the purpose of reducing the size of the project

1. Install babel-plugin-component

npm install babel-plugin-component -D
复制代码

2. Modify .babelrc

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
复制代码

3. Introduce some components in main.js

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

 Vue.use(Button)
 Vue.use(Select)
复制代码

9. Optimize infinite list performance

Refer to the open source projects vue-virtual-scroll-list and vue-virtual-scroller to optimize this infinite list scenario;

---