vue3 生命周期

 

<template>
  <input type="text" v-model="message">
  {{message}}
</template>

<script>
import { computed, reactive, ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "vue";
export default {
  setup(props,content) {
    let message =ref("Vue3 Info")
    onBeforeMount(()=>{
      console.group("---onBeforeMount---")
      console.groupEnd("---onBeforeMount---")
    })
    onMounted(()=>{
      console.group("---onMounted---")
      console.groupEnd("---onMounted---")
    })
    onBeforeUpdate(()=>{
      console.group("---onBeforeUpdate---")
      console.groupEnd("---onMounted---")

    })
    onUpdated(()=>{
      console.group("---onUpdated---")
      console.groupEnd("---onMounted---")

    })
    onBeforeUnmount(()=>{
      console.group("---onBeforeUnmount---")
      console.groupEnd("---onMounted---")

    })
    onUnmounted(()=>{
      console.group("---onUnmounted---")
      console.groupEnd("---onMounted---")

    })
    return {
      message
    }
  },
    // 创建之前
  beforeCreate() {
    console.group("---beforeCreate---")
    console.log("%c%s", "color:red","this     : ",  this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.log("%c%s", "color:red","message: " , this.message)
    console.groupEnd("---beforeCreate---")
  },

  // 创建完成（可以访问当前this实例）
  created() {
    console.group("---created---")
    console.log("%c%s", "color:red","this     : " , this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.log("%c%s", "color:red","message: " , this.message)
    console.groupEnd("---created---")
  },

  // 挂载完成（可以访问DOM元素）
  mounted() {
    console.group("---mounted---")
    console.log("%c%s", "color:red","this     : " , this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.log("%c%s", "color:red","message: " , this.message)
    console.groupEnd("---mounted---")
  },



  // 挂载之前
  beforeMount() {
    console.group("---beforeMount---")
    console.log("%c%s", "color:red","this     : " , this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.log("%c%s", "color:red","message: " , this.message)
    console.groupEnd("---beforeMount---")

  },
  // 更新之前
  beforeUpdate() {
    console.group("---beforeUpdate---")
    console.log("%c%s", "color:red","this     : " , this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.log("%c%s", "color:red","message: " , this.message)
    console.groupEnd("---beforeUpdate---")

  },

  // 更新之后
  updated() {
    console.group("---updated---")
    console.log("%c%s", "color:red","this     : " , this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.log("%c%s", "color:red","message: " , this.message)
    console.groupEnd("---updated---")
  },

  // 销毁之前
  beforeUnmount() {
    console.group("---beforeUnmount---")
    console.log("%c%s", "color:red","this     : " , this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.groupEnd("---beforeUnmount---")
  },

  // 销毁完成
  unmounted() {
    console.group("---unmounted---")
    console.log("%c%s", "color:red","this     : " , this)
    console.log("%c%s", "color:red","el     : " , this.$el)
    console.log("%c%s", "color:red","data   : " , this.$data)
    console.groupEnd("---unmounted---")
  },

  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},

};
</script>

<style>
</style>