Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Nowadays more and more people learn Vue, Vue framework or React framework learning has become a front-end developer’s necessary skills, today we will talk about Vue lifecycle function, Vue lifecycle function reference value is very high, let’s get to know it ~

Life cycle in Vue2

The life cycle of the instance

Before we get into the life cycle, we need to know that when rendering a piece of page content in Vue, there are several processes:

  1. Parsing the syntax generates an AST.
  2. Based on the AST result, data is initialized.
  3. The virtual DOM is generated based on AST results and data data binding.
  4. Insert the real DOM generated from the virtual DOM into the page, at which point the page is rendered.

When our bound data is updated, the following processes occur:

  1. The framework receives the event of a data change and generates a new virtual DOM tree from the data. The difference is obtained by comparing the old and new virtual DOM trees.
  2. Apply the differences to the actual DOM tree, updating the page content based on the differences.

When we clear the page, there are:

  1. Log out of instances, clear page content, remove binding events, listeners, and so on.

Vue provides a total of eight lifecycle functions for instances:

  1. beforeCreate(): Before initializing the instance,data,methodsSo I can’t get — after 1, before 2
  2. created(): instantiation The value can be obtained when initialization is completedataIn the data andmethodsEvent — after 2, before 3
  3. beforeMount(): The virtual DOM is created and not mounted to the page.vm.$elUnmounted templates are available — after 3, before 4
  4. mounted(): Data binding is complete, the real DOM has been mounted to the page,vm.$elThe real DOM is available — after 4
  5. BeforeUpdate (): Data is updated, DOM Diff gets the difference, not updated to the page — 5 after, 6 before
  6. Updated (): Data updated and page updated — 6 after
  7. BeforeDestroy (): Before instance destruction — before 7
  8. Destroyed (): After the instance is destroyed — 7

For example life cycles, you can also refer to the official legend

Other lifecycle hooks

Other lifecycle functions include activated(), deactivated(), errorCaptured()

The unique lifecycle of keep-Alive is activated and deactivated, respectively.

Components wrapped with keep-alive are not destroyed during switching, but are cached in memory and execute deactived hook functions. Activated hook functions are executed after hitting a cache render

ErrorCaptured () Hook This hook is called when an error is caught in a child component.

Life cycle in Vue3

The life cycle in Vue3 is different using the Options API and Composition API.

Options API life cycle

  • BeforeDestroy beforeUnmount instead
  • Destroyed to unmounted

Why did you change it to this way? His reply is that it is largely for the sake of better naming convention. The corresponding Chinese is exactly the same as the previous mount component.

  • Others follow the Vue2 life cycle

Composition API lifecycle

To use the hook function in the Composition API, we simply add “on” before the hook function and inside the setup function, and it will look like 👇

We just need to introduce these hook functions and use them

Vue3 hook functions are as follows:

  1. onBeforemount()
  2. onMounted()
  3. onBeforeUpdate()
  4. onUpdated()
  5. onBeforeUnmount()
  6. onUnmounted()
  7. onActivated()
  8. onDeactivated()
  9. onErrorCaptured()

If you notice, the two lifecycle functions are missing. BeforeCreate () and created() do not appear in the Composition API. The setup() method appears between beforeCreate() and created().

Two new Vue3 lifecycle functions

  • OnRenderTracked () : This function is called the first time a reactive dependency is accessed in the render function. Hooks are useful for modality when we want to see which dependencies are being tracked.
  • OnRenderTriggered (): This option is called when a new rendering is triggered, allowing you to check which dependency triggered the component to be rerendered.

The last

⚽ this article mainly introduces the life cycle function in Vue, I believe you must gain ~ ⚾ if you are interested in this article welcome to like attention + collection, more wonderful knowledge is waiting for you! 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript