Intensive reading of the Vue official document series 🎉

Introduction to the

SPA applications are more prone to “memory leaks” than MPA. Because the user does not need to refresh the browser when using the SPA application. At this point, it is up to the application itself or the browser to clean up the unwanted code and ensure that the garbage collection is as expected.

Reasons for occurrence

When you use non-Vue libraries, plug-ins, components, event behavior handling, DOM rendering, etc., in a Vue application, it is very likely that memory leaks will occur.

Triggered scenario

  • When a component is destroyed, no dependencies are cleared.
  • Routes enter and leave without clearing dependencies.
  • No dependencies were cleared during the keepAlive switchover. Procedure

The impact of

The memory usage of applications increases, which affects application performance and may cause security risks.

Practical example

The following is a concrete instance where a new application instance is created each time the show/hide button is toggled.

Template part:

<button v-if="show" @click="show=false">hide</button>
<button v-if=! "" show" @click="handleShow">show</button>
<div v-if="show" id="app"></div>
Copy the code

Component logical part:

{
  data() {
    return {
      show: true}; },methods: {
    initApp() {
      new App({ el: "#app" });
    },
    handleShow() {
      this.show = true;
      this.$nextTick(() = > {
        this.initApp(); }); }},mounted() {
    this.initApp(); }},Copy the code

In this case, a memory leak will occur. Although Vue will clear the DOM element in #app each time it is hidden, the memory reference of the instance generated by the constructor will still exist, and the instance will be created repeatedly each time the handleShow method is executed. And they don’t get released.

The solution is simply to define a variable to receive each generated instance, and then execute the instance destruction method in the component’s beforeDestroy hook.

{
  beforeDestroy(){
    // this.app = new app ({el:'#app'}) in methods handleShow.
    this.app.destroyed();
    this.app = null; }}Copy the code

By way of analogy, in the Vue official documentation “Examples – Embedded Components” chapter, we mentioned how to integrate traditional plug-ins or components based on the Jquery ecosystem in Vue. For a similar scenario, we must be aware of memory leaks.

In combination with the above examples, some typical memory leak scenarios can occur:

  • The destruction function was not called correctly using a third-party library.
  • If you store data in a local scope (such as a component) in a global one (such as a window), you can create a memory leak. Typical exampleEventBusEvent bus technology.
  • Binds events to the DOM or object outside the scope of the current component and is not cleaned up when the component is destroyed, for example, events and timers bound to window.

Solution

The core secret is always to be vigilant, especially when using third-party libraries that have DOM manipulation.

  1. In the componentbeforeDestroyHook to clean up.
  2. forkeep-aliveCan be found indeactivatedTo clean up.

How to check?

This can be analyzed using the browser’s memory-Heap Snapshot tool.