What keep alive

Sometimes we don’t want components to be re-rendered to affect the experience; Or for performance reasons, avoid repeated rendering that degrades performance. Instead, you want the component to be cached and maintain its current state. This is where the keep-alive component is needed

  • Two more lifecycle functions enter activated and leave deactivated

  • First entry:

    1. created > mounted > activated
    2. Trigger after exitdeactivated

  • Enter again:

    1. Only triggersactivated

  • Mount methods, etc., that are executed only once in Mounted. The method that the component executes each time it goes in is placed in Activated

The basic use

// The keep-alive attribute includes the component to be cached, and the exclude attribute includes the name attribute of the component. <keep-alive :include="['indexView']"> </keep-alive>Copy the code