<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>