vue3_lifecycle_hooks_5.vue

<template>
    <img ref="img" :src="img" alt="image" width="200" />
  <span>comment/uncomment me to see beforeUpdate/updated hook's reactivity</span>
</template>

<script>
export default {
 data() {
    console.log("I'm data hook");
    return {
      img: "",
    };
  },
    beforeUpdate() {
    console.log(
      "I'm beforeUpdate hook and i can help to apply extra effects before a DOM is updated"
    );
    console.log("width of img div ", this.$refs.img.width);
    this.$refs.img.width = 300;
    console.log("width of img div after overriding ", this.$refs.img.width);
  },
}
<script>



Output:

I'm setup hook

I'm beforeCreate hook
Bob is currently  undefined
computed hook is returning  undefined

I'm data hook

I'm created hook
Bob is currently  sleeping
Bob is currently  awakened but still sleeping

computed hook is returning  I'm computed hook 

I'm beforeMount hook
The Dom node is undefined

I'm mounted hook
The Dom node is  <div>​Hello readers !​</div>​

I'm beforeUpdate hook and i can help to apply extra effects before a DOM is updated
width of img div  200
width of img div after overriding  300