I have seen a lot of people talk about the life cycle of VUE, but it is always surrounded by clouds in the fog, especially the self-taught students, maybe the foundation of JS is not too solid, it sounds more difficult, then I have my own humble opinion, in the vernal way to you to sort out, if there are inaccurate place, welcome to correct! 🤞 🤞

What is the life cycle?

Life cycle, in personal view, is a process from birth to death of a thing!

Analogy to one’s life to do, in fact, can be simple and rough life cycle will be considered a person’s life, the birth began a person’s a beautiful journey (hard), corresponding to every growth stage in life do what to do at each stage, for example, kindergarten, primary school, middle school, high school, college, work (for example, I was in hard code word). Marriage and so on until a hundred years later, dust to dust, dust to dust, that’s the human life cycle!

Vue also has such a life cycle, and will do some things in each stage of execution, the difference is that vUE in each corresponding stage is through the life cycle function to do, now look at the description of the life cycle of vUE website is much easier to understand!

  • Description of vUE website:

Each Vue instance goes through a series of initialization procedures when it is created — for example, it needs to set up the data listener, compile the template, mount the instance to the DOM, and update the DOM when the data changes. It also runs functions called lifecycle hooks, which give users the opportunity to add their own code at different stages.

In simple terms, between the creation of a Vue instance and its complete demise, a series of methods are executed that correspond to the current state of Vue. These methods are called lifecycle hooks!

Let’s take a look at the picture THAT I’ve found for you, and you can save it for later learning to use it more deeply, and then look at this picture:

According to the figure above, there are 8 hook functions in vUE’s life cycle. These 8 hook functions describe the life of a Vue. Let’s take a look at these 8 lifecycle functions in detail to better understand the life cycle of vue.

Vue’s 8 lifecycle functions

  • Watch with the picture above
  1. BeforeCreate: Called after instance initialization and before Data Observer and Event /watcher event configuration.
  2. Created: Called immediately after the instance is created. In this step, the instance has completed the following configuration: Data Observer, property and method operations, watch/ Event event callback; However, the mount phase has not yet started and the $EL attribute is not currently visible.
  3. BeforeMount: is called before the mount begins, and the related render function is called for the first time.
  4. Mounted: el is replaced by the newly created VM.$el and is called after the instance is mounted.

If the root instance mounts an element in the document, vm.$el is also in the document when mounted is called. (PS: Note that Mounted does not promise that all child components are mounted together.

If you want to wait until the entire view is rendered, you can replace Mounted: with vm.$nextTick. Vm.

  1. BeforeUpdate: Called when data is updated and occurs before the virtual DOM is patched. This is a good place to access an existing DOM prior to an update, such as manually removing an added event listener.
  2. updated: 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 it can now perform operations that depend on the DOM, however in most cases you should avoid changing the state in the meantime. If the state changes accordingly, it is usually best to use computed properties orwatcherInstead (PS: Compute properties and Watcher will cover them in a later section).
  3. BeforeDestroy: called before the instance is destroyed, at which point the instance is still fully available.
  4. Destroyed: Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all child instances are destroyed.

Code validation:

In the following example, I intentionally numbered the lifecycle hook functions out of order, but it will automatically output in the execution order to verify the process shown in the figure above. Try it manually!

<div id="app">
    <button @click="clickCounter()">Click on the</button>
    <p>{{ count }}</p>
</div>
    
    <script type="text/javascript">
      var app = new Vue({
        el: '#app'.data: {count: 1
        },
        methods: {clickCounter(){
            this.count += 1}},created: function(){
          console.log('2. Instance already created ')},beforeCreate: function(){
          console.log('1. Instance initialization ')},mounted:function(){
          console.log('4. Mount to instance ')},beforeMount:function(){
          console.log('3. Before mounting begins')},beforeUpdate: () = > {
          console.log('Called when data is updated')},updated:function(){
          console.log('Update the data and re-render the DOM')},beforeDestroy:function(){
          console.log('Called before instance destruction')},destroyed:function(){
          console.log('Called after instance destruction')}})/* Click on the page to destroy the vue object, after which the instance will be released */
      // After the destruction, clicking again will not work
      document.onclick=function(){
          app.$destroy();
      };
    </script>
Copy the code

  • Note: finally I will manually destroy this instance, click after the execution of a, after the click will not work, the test of the destruction of code side first comment out, and then release, test!

Three lifecycle hooks for vUE components

  1. Activated: called when the keep-alive component is activated (PS: related to the component, more about keep-alive in the component section).
  2. Deactivated: called when the keep-alive component is disabled (PS: component related, more about keep-Alive in the component section).
  3. ErrorCaptured: Called when capturing an error from a descendant component. This hook takes three arguments: the error object, the component instance where the error occurred, and a string containing information about the source of the error. The hook can return false to prevent the error from spreading upward.

Write in the last

Life cycle this knowledge point, in this piece of knowledge, we only need to understand, about the use of a basic master, waiting for the depth of learning and understanding, back to look at a piece of content, combined with Vue source code to see will harvest a lot!

Thank you for reading, if it helps you, welcome to the “CRMEB” nugget. Code cloud has our open source mall project, knowledge paid project, JAVA edition full open source mall system, learning and research welcome to use, old Iron easy point star bai, the boss reward five cents, cent you two cents, 😂😂 pay attention to keep in touch with us!