Vue.js instance / component lifecycle

Vue lifecycle

Introduction

In order to target some specific moments in the “life” of a single vue instance/component, so-called core Vue.js frameworks are integrated. hooks. The hooks allow you to start the desired action precisely at the right moment in the component’s life cycle. The hooks within the Vue.js framework are presented through specific predefined methods that make it possible.

Methods related to Lifecycle

All lifecycle methods are stored in the root Vue instance as a direct property.

1. Initial hooks

These hooks allow you to add actions before the instance is added to the DOM (not specified). Unlike all other hooks, these hooks are also executed during server-side rendering. Use this hook if you need to do something during client-side rendering and server-side rendering.

beforeCreate

The actions defined through this method are executed at the instantiation of the instance, the “given” property is not yet reactive and the events have not yet been activated:

created

Actions defined through this method can access the “data” property and events are activated, however “template” and “Virtual DOM” are not rendered.

2. Mounting hooks

These hooks are tied to the instant redeployment of the instance in the DOM. One is related to the moment before rendering and the other to the moment after rendering. ” It is most commonly used to download data for your component. Use it if you want to access or modify the DOM before or after rendering the instance. Also, use it to integrate other libraries and frameworks.

beforeMount

This hook is very rarely used, and actions defined through this method are executed before the rendering of the instance itself.

mounted

This is one of the most commonly used hooks, with it we have full access to reactive components, template, and rendered DOM (via. This. $ El). Actions defined through this method are executed after rendering the instance.
The distinction between the “v-if” directive that performs mount and unmounts components should be emphasized, as opposed to the “v-show” directive that only lights up and dims the component’s visibility.

3. Update hooks

These hooks are used to define the moment before and after some change that causes re-rendering. Used when debugging is needed to know if something has been re-rendered. If we know when something is rendered, then don’t use it, because it is better to use “computed properties” or “watchers”.

beforeUpdate

Actions defined through this method are executed after the data on your component is changed at the moment when the update cycle begins, just before the DOM is updated and re-rendered.

updated

Actions defined through this method are executed after changing the data on your component, right after the DOM is updated and re-rendered.

4. Keep-alive hooks

These hooks allow you to detect when a component wrapped in is on or off. You can use them to collect data for your component (fetch data), it has similar behaviors as “created” and “beforeDestroy” without having to re-build complete components.

activated

deactivated

5. Destruction hooks

These action hooks allow you to waste time on your actions when a component is destroyed and removed from the DOM. Eg. such as clearing data or sending analytics.

beforeDestroy

The actions defined through this method are executed before the component is destroyed while still functional. Used if you need to clear events or reactive subscriptions.

destroyed

The actions defined through this method are executed after the instance is destroyed and removed from the DOM.

errorCaptured

The actions defined through this method are executed

Example

HTML

<div id="app">
  <h2>Lifecycle Vue instance</h2>
    <h4>I faza:</h4>
    <p>Pri samom relodovanju stranice se izvrše 4 procesa (pogledaj konzolu):</p>
    <ul>
        <li>"beforeCreate!"</li>
        <li>"created!"</li>
        <li>"beforeMount!"</li>
        <li>"mounted!"</li>
    </ul>
    <h4>II faza:</h4>
  <button @click="promeni">Klikni i promeni tekst ispod <br>(da bi se odradio update DOM-a)</button>
    <p class="update">{{message}}</p>
    <p><strong>Napomena:</strong> <br> Obratite pažnju da se "Updated DOM!" štampa u konzoli samo posle prvog klika na btn, jer Vue koristi Virtual DOM i ažurira "pravi" DOM samo kada treba :)</p>
    <h4>III faza:</h4>
    <button @click="destroy">Ukloni Vue instancu</button>
    <p>Posle klika na dugme "Ukloni Vue instancu" se u konzoli štampa: </p>
    <ul>
        <li>beforeDestroy!</li>
        <li>destroyed!</li>
    </ul>
    <p> Dugme neće reagovati na drugi klik, jer Vue instanca je izbrisana i nema više uticaj na DOM</p>
    <button @click="promeni2">Ovo dugme nema funkciju nakon uklonjene Vue instance</button>
    <p class="update">{{message2}}</p>
</div>

SCSS

body {
  font-family: 'Bitter', serif;
}

#app {
  text-align: center;
  margin: 1rem 5rem;
  display: table;
    p, h4{
        text-align: left;
    }
}
.update{
    margin:1rem;
    background-color:#FFC107;
    text-align: center!important;
    padding:1rem
    
}
ul{
    margin: 1rem auto;
    width: 100px;
    padding-left:0;
    li {
        text-align: left;
    }
}

.num {
  color: #AF007E;
}

button {
  font-family: 'Bitter';
  background: #c62735;
  color: white;
  border: 0;
  padding: 5px 15px;
  margin: 0 10px;
  border-radius: 4px;
  outline: 0;
  cursor: pointer;
}

h4 {
  margin: 0 0 15px;
}

BABEL

new Vue({
  el: '#app',
  data : {
    message: "Tekst za menjanje",
        message2: "Tekst za menjanje"
  },
     beforeCreate() {
    console.log("beforeCreate!");
  }, 
  created() {
    console.log("created!");
  }, 
  beforeMount() {
    console.log("beforeMount!");
  }, 
  mounted() {
    console.log("mounted!");
  }, 
    updated() {
         console.log("Updated DOM!");
    },
  beforeDestroy() {
    console.log("beforeDestroy!");
  }, 
  destroyed() {
    console.log("destroyed!");
  },
  methods: {
    promeni : function () {
     this.message = "Promenjen tekst"
    },
        promeni2 : function () {
     this.message2 = "Promenjen tekst"
    },
        destroy : function () {
            this.$destroy();
        }
  }
});

Likes:
15 0
Views:
2172
Article Categories:
PROGRAMMINGTECHNOLOGY

Leave a Reply

Your email address will not be published. Required fields are marked *