Vue.js Lifecycle Hooks

What are lifecycle hooks in Vue.js?

Lifecycle hooks in Vue.js are special methods that allow developers to execute code at specific stages of a Vue instance's lifecycle. These hooks provide opportunities to run code during the creation, mounting, updating, and destruction of Vue components.

What are the main lifecycle hooks available in Vue.js?

The main lifecycle hooks in Vue.js include:

• beforeCreate: Called after the instance is initialized but before data observation and event/watcher setup.
• created: Called after the instance is created, data observation is set up, and computed properties are initialized.
• beforeMount: Called before the mounting begins; the render function is not yet called.
• mounted: Called after the component has been mounted to the DOM.
• beforeUpdate: Called before the DOM is re-rendered and patched when reactive data changes.
• updated: Called after the component has re-rendered and the DOM has been updated.
• beforeDestroy: Called right before a component instance is destroyed; you can perform cleanup here.
• destroyed: Called after a component instance is destroyed, allowing for final cleanup tasks.

How do you use the created lifecycle hook?

The created lifecycle hook is used to perform actions after the instance is created but before it is mounted to the DOM. It's a good place to fetch data or set up initial values.

const app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  created() {
    this.message = 'Component created!';
    console.log('Created hook called');
  },
  template: '<p>{{ message }}</p>'
});

What is the purpose of the mounted lifecycle hook?

The mounted lifecycle hook is called after the component is mounted to the DOM. It is often used for DOM manipulation or fetching data that requires access to the rendered DOM elements.

const app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  mounted() {
    this.message = 'Component mounted!';
    console.log('Mounted hook called');
  },
  template: '<p>{{ message }}</p>'
});

How do you use the beforeDestroy lifecycle hook?

The beforeDestroy lifecycle hook is used to perform cleanup tasks before a component instance is destroyed. This can include removing event listeners, stopping timers, or cleaning up external resources.

const app = new Vue({
  el: '#app',
  data: {
    interval: null
  },
  created() {
    this.interval = setInterval(() => {
      console.log('Interval running');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.interval); // Cleanup
    console.log('Before Destroy hook called');
  },
  template: '<p>Check the console for interval messages.</p>'
});

What is the difference between beforeUpdate and updated hooks?

The beforeUpdate hook is called right before the DOM is re-rendered and patched, allowing you to perform actions just before the update occurs. The updated hook is called after the DOM has been re-rendered and reflects the changes in the Vue instance.

const app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  watch: {
    count(newValue) {
      console.log('Count changed to:', newValue);
    }
  },
  beforeUpdate() {
    console.log('Before update: Count is', this.count);
  },
  updated() {
    console.log('Updated: Count is now', this.count);
  },
  template: `
    <div>
      <button @click="count++">Increment</button>
      <p>Count: {{ count }}</p>
    </div>
  `
});

Can you use lifecycle hooks with Vue components created via Vue.extend()?

Yes, you can use lifecycle hooks with Vue components created via Vue.extend(). These hooks will work just like they do with components defined using the standard object syntax.

const MyComponent = Vue.extend({
  data() {
    return { message: 'Hello from extended component!' };
  },
  mounted() {
    console.log(this.message);
  },
  template: '<p>{{ message }}</p>'
});

new MyComponent().$mount('#app');

How can you create a mixin with lifecycle hooks in Vue.js?

You can create a mixin that includes lifecycle hooks and then use that mixin in your components. This allows you to share common behavior across multiple components.

const myMixin = {
  created() {
    console.log('Mixin created hook called');
  },
  mounted() {
    console.log('Mixin mounted hook called');
  }
};

const app = new Vue({
  el: '#app',
  mixins: [myMixin],
  data: {
    message: 'Hello!'
  },
  template: '<p>{{ message }}</p>'
});

How do you watch lifecycle hooks in Vue.js?

You cannot watch lifecycle hooks directly, but you can watch data properties or computed properties that may trigger those hooks. This allows you to respond to changes that may indirectly relate to the lifecycle events.

const app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  watch: {
    counter(newValue) {
      console.log('Counter changed:', newValue);
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++; // This will trigger the watcher
    }, 1000);
  },
  template: '<p>Counter: {{ counter }}</p>'
});