0 votes
in VueJS by
What are the lifecycle methods of VueJS?

1 Answer

0 votes
by
selected by
 
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

Related questions

0 votes
asked Jul 2, 2019 in ReactJS by Venkatshastri
0 votes
asked Sep 6, 2023 in VueJS by DavidAnderson
...