Search⌘ K
AI Features
Home
Courses
Advanced VueJS: Build Better Applications Efficiently

Mount Related Hooks

Explore how Vue's beforeMount and mounted lifecycle hooks function during component mounting. Understand their use cases, including handling scroll events and intervals, while considering performance and memory management.

We'll cover the following...

After a component has been created, it needs to be mounted to the DOM. Right before the mounting takes place, Vue executes the beforeMount hook. Right after the completion of the component mounting, the mounted hook is executed. Let’s look deeper into these hooks and what their use is.

Adding the hooks

Since hooks are also called component options, we can define them just like other component options, such as methods or data. We can add them as functions on the app.

Javascript (babel-node)
import { createApp } from 'vue'
createApp({
  // data() { ... },
  // computed: ...,
  // methods: ...,
  beforeMount() {
    console.log('Hello from beforeMounted in app')
  },
  mounted() {
    console.log('Hello from mounted in app')
  }
})

We can also ...