This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

You can’t write code until you’re fed

In Vue Basics -2, we introduced the component related knowledge, today we will explain the Vue life cycle, before the interview encountered many times this problem, now let’s make it clear!

The life cycle

Each component of a Vue has its own lifecycle, which is from the creation of the component, through initialization, mount, update, and finally destroyed. This whole process is called the life cycle! The diagram of Vue official website is as follows:

From top to bottom:

  • The constructor generates an instance of Vue;
  • Event and lifecycle hook initialization;
  • BeforeCreate is called after instance initialization and before data Observer and event configuration. This is when the component’s option objects are not created and EL and data are not initialized. At this time, you cannot access methods, data, computed and other data and methods!
  • Initialize the Inject provide State property.
  • The created instance is called after it has been created; Data has been initialized, attributes computed, event/ Watch event callbacks, but the DOM tree is not mounted; At this time, you can call the methods in the Methods, change the data in the data, and the changes can be displayed on the page through Vue’s responsive binding!
  • Whether there are EL objects;
  • No mount;
  • Whether there is a template;
  • Have to convert the template to the render function, through the render function dom tree creation and rendering;
  • Compile el objects without templates, using the outer HTML as the template;
  • BeforeMounted is called before the mount starts. Render is called for the first time to generate the virtual DOM. The instance has compiled the template, generated HTML from the data and template, and initialized el and data. But it’s not on the HTML page yet!
  • Create $EL in Vue instance and replace the real DOM;
  • Mounted, the DOM tree has been rendered to the page, and DOM operations can be performed.
  • BeforeUpdate Data has updates called
  • The virtual DOM re-renders the patch
  • Updated Data has been updated
  • BeforeDestroy called before the instance is destroyed, before which the instance data can also be accessed
  • Clear the watcher, subcomponents, and event listeners
  • Called after the Destroyed component is destroyed
  • The component has been destroyed

The specific effect of each hook function can be viewed by writing code!