Advanced VueJS: Build Better Applications Efficiently/

...

/

Updating Hooks

Updating Hooks

Learn and practice the two Vue lifecycle hooks related to updating—beforeUpdate and updated.

We'll cover the following...

Whenever a component is updated, the beforeUpdate hook is called right before the update. Right after, the updated hook is invoked. We’ll look into what Vue considers an update later in this lesson. First, we need to know how we can implement these hooks.

Adding the hooks

We can add them the same way we introduce all the other hooks since they are component options. We can add them as functions on the app.

Press + to interact
import { createApp } from 'vue'
createApp({
  // data() { ... },
  // computed: ...,
  // methods: ...,
  beforeUpdate() {
    console.log('Hello from beforeUpdate in app')
  },
  updated() {
    console.log('Hello from updated in app')
  }
})

We can also add them to a component, as shown below:

Press + to interact
<template>
  <!-- ... -->
</template>
<script>
  export default {
    beforeUpdate() {
      console.log('Hello from beforeUpdate in component')
    },
    updated() {
      console.log('Hello from updated in component')
    }
  }
</script>

What is an update?

An update is invoked ...