background

The VUE lifecycle represents the hook functions that a component runs from creation to destruction, and learning about it helps us understand the rendering process of a VUE instance.

This article is based on vuE3 generalization

Life cycle diagram parsing

1. app = Vue.createApp(options); app.mount(el)

The call to createApp returns an application instance mounted on the EL

Import {createApp} from 'vue' import App from './ app.vue 'const App = createApp(App) # # App Element in the project root directory index.html app.mount('#app')Copy the code

2. Init events & lifecycle

Initializes the event and lifecycle

3. Init injections & reactivity

Initialize injection and responsiveness

3.1 beforeCreate

Data Observer is called after instantiation and before event/watcher events are configured

3.2 created

Called immediately after the instance is created. The instance has completed data observation, property and method calculation, and watch/event callback. The mount phase has not started and the $EL property is not currently available

4. template ? function : el’s innterHTML

Check whether the ‘template’ option exists

4.1 There are variations of templates to render functions *

4.2 If not, compile the innerHTML of the EL to the template *

5. Create app.$el and append it to el

Create app.$el and add it to EL

5.1 beforeMount

Called before mount: The relevant render function is called for the first time

5.2 mounted

App.mount is replaced by the newly created VM.$el.

Mounted does not guarantee that all child components will be mounted together. You can call $nextTick

5.3 activated

Called when a component is packaged with keep-Alive. The call is called after Mounted, or before the parent, if it has a parent component. When switching components, other lifecycle hooks are not called, and only activated is called

6. mounted

The page is mounted, and data updates may occur at this stage

6.1 beforeUpdate

Called when a component is updated, before the virtual DOM is patched. It is suitable to access the existing DOM before updating, such as manually removing added event listeners

6.2 Virtual DOM re-rendered and path

The virtual DOM is rerendered and updated

The 6.3 update

This hook is called after the virtual DOM is rerendered and patched due to data changes.

When this hook is called, the component DOM has been updated, so DOM dependent operations can be performed here. You should avoid changing related states in updates and avoid unlimited updates

Updated does not guarantee that all child components will also be redrawn together. You can use $nextTick

7. Unmounted

Component uninstall phase, such as jump page

7.1 beforeUnmount

Called before the component instance is uninstalled. At this stage, the instance is still complete

7.2 deactivated

When a component is kept alive, it is called when the component is disabled. The call falls between beforeUnmount and unmounted, and is equivalent to unmounted if it is an in-page component switch

7.3 unmounted

Called after the component instance has been uninstalled. When the hook is called, all directives for the component instance are unbound, all event listeners are removed, and all child component instances are unloaded

Special lifecycle hooks

The eight lifecycles mentioned above are commonly used, and there are five that are less commonly used

# Activated when a keep-alive component is activated and that is activated after mounted Between beforeUnmount and unmounted deactivated # is called errorCaptured when catching an error from a descendant component # renderTracked # when the virtual DOM is rerendered RenderTriggered is called when rerendering is triggeredCopy the code

BeforeCreate Created beforeMounte Mounted Of the parent component

We all know that components are created and then mounted, so the execution order of these two lifecycle hooks for parent and child components may not be concerned. The following is the order of execution, it is best to manually knock it through to deepen the impression

  1. Father beforeCreate
  2. The father created
  3. Father beforeMount
  4. The child beforeCreate
  5. The child created
  6. The child beforeMount
  7. The child mounted
  8. Father mounted

There are other cases where the pattern is from parent to child, recursively, from top to bottom. Without explaining it in detail, let’s try it out

  1. Brother components
  2. Paternal assembly
  3. There are both paternal and sibling components
  4. The activated and deactivated hooks have been added for keep-alive cases

Unmount the parent and child components

If the page goes to A, go to B

  1. A beforeUnmount
  2. B setup
  3. B beforeCreate
  4. B created
  5. B beforeMount
  6. A unmounted
  7. B mounted

It can be found that page jump will not mount page A until B page beforeMount

The value of activated and deactivated under keep-alive

V-if is used to switch components. The effect is the same as: IS. What happens if we use v-show

One of the two switched components is keep-alive and one is not. What if both are keep-alive

1. Card3 of the keep-Alive package is loaded for the first time on the page

Note That the activated value of card3 is executed between Card3 Mounted and keep-alive Mounted

2. Switch components card3 into card4(first loading)

It is worth noting here that the deactivated of card3 is unmounted if there is no keep-alive

3. Switch card4 to card3 in the page (both pages have been loaded)

Card3 activated is between card4 beforeUnmounted and card4 unmounted

4. Switch card3 to card4 in the page (both pages have been loaded)

This step is consistent with the two operations

conclusion

  1. The life cycle of VUE can be said to carry out all aspects of the entire VUE, which can be used as the knowledge framework of VUE to sort out various knowledge points

  2. Hands-on practice can better deepen understanding

  3. Learning about the lifecycle not only focuses on the features of the hook, but also on the work done at each stage

Question to consider

  1. BeforeCreate Created beforeMount Mounted What is the execution order of the four hooks? What if the child component has child components on top of that

  2. How does the lifecycle hook for page jump execute? What happens when the page closes

  3. Where in the lifecycle does $nextTick need to be used

  4. Complete statement side life cycle process

  5. Activated & deactivated Specifies the execution time