What are Vue.js lifecycle hooks and how do I use them?

What are Vue.js lifecycle hooks and how do I use them?

Vue.js lifecycle hooks are functions that allow you to run code at specific stages of a component's lifecycle. They include hooks like created, mounted, updated, and destroyed. You can use them to perform actions like fetching data or cleaning up resources.

Can you give me an example of using the mounted hook?

Sure! In the mounted hook, you can access the DOM elements. For example:

mounted() {
  console.log('Component is mounted!');
  this.fetchData();
}

This code runs when the component is added to the DOM.

What about the beforeDestroy hook?

The beforeDestroy hook is called right before a component is destroyed. It's a good place to clean up resources, like removing event listeners. For example:

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

Are there any best practices for using lifecycle hooks?

Yes! Keep your hooks clean and focused. Avoid heavy computations in hooks, and use them primarily for setup and teardown tasks.