vue3_lifecycle_hooks.vue

<template>
  <div ref="greeting">Hello readers !</div>
  <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 {
  setup() {
    console.log("I'm setup hook");
  },
  data() {
    console.log("I'm data hook");
    return {
      stateOfBob: "sleeping",
      img: "",
    };
  },
  computed: {
    test: function () {
      return "I'm computed hook";
    },
  },
  beforeCreate() {
    console.log("I'm beforeCreate hook");
    console.log("Bob is currently ", this.stateOfBob);
    console.log("computed hook is returning ", this.test);
  },
  created() {
    console.log("I'm created hook");
    console.log("Bob is currently ", this.stateOfBob);

    this.stateOfBob = "awakened but still sleeping";
    console.log("Bob is currently ", this.stateOfBob);

    console.log("computed hook is returning ", this.test);
  },
  beforeMount() {
    console.log("I'm beforeMount hook");
    console.log("The Dom node is ", this.$refs["greeting"]);
  },
  mounted() {
    console.log("I'm mounted hook");
    console.log("The Dom node is ", this.$refs["greeting"]);
  },
  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);
  },
  updated() {
    console.log("I'm updated hook");
    this.img = "https://picsum.photos/200/300"; //updates the image src
  },
  beforeUnmount() {
    console.log("I'm beforeUnmount hook");
    this.$refs.img.width = 0;
  },
  unmounted() {
    console.log("I'm unmounted hook");
    this.$refs.img.width = 0;
  },
};
</script>

which line comment/uncomment to see beforeUpdate/updated hook?