Categories

Feb 4 in Vue.JS
Q: What are the lifecycle methods of VueJS?

1 Answer

Feb 4
 
Best answer
Lifecycle hooks are a window into how the library you’re using works behind-the-scenes. By using these hooks, you will know when your component is created, added to the DOM, updated, or destroyed. Let's look at lifecycle diagram before going to each lifecycle hook in detail,

Creation(Initialization): Creation Hooks allow you to perform actions before your component has even been added to the DOM. You need to use these hooks if you need to set things up in your component both during client rendering and server rendering. Unlike other hooks, creation hooks are also run during server-side rendering.

beforeCreate: This hook runs at the very initialization of your component. hook observes data and initialization events in your component. Here, data is still not reactive and events that occur during the component’s lifecycle have not been set up yet.

    new Vue({

      data: {

       count: 10

      },

      beforeCreate: function () {

        console.log('Nothing gets called at this moment')

        // `this` points to the view model instance

        console.log('count is ' + this.count);

      }

    })

       // count is undefined

created: This hook is invoked when Vue has set up events and data observation. Here, events are active and access to reactive data is enabled though templates have not yet been mounted or rendered.

  new Vue({

    data: {

     count: 10

    },

    created: function () {

      // `this` points to the view model instance

      console.log('count is: ' + this.count)

    }

  })

     // count is: 10
Click here to read more about Vue JS
Click here to read more about Insurance

Related questions

Madanswer
Feb 4 in Vue.JS
Feb 4 in Vue.JS
Feb 4 in Vue.JS
...