一、Vue3.x中组件的生命周期函数
摘自官网的图
LifeCycle.vue组件
<template>
<h2>生命周期函数演示</h2>
</template>
<script>
export default {
name: "",
data() {
return {
}
},
methods: {
},
beforeCreate() {
console.log("实例刚刚被创建1")
},
created() {
console.log("实例已经创建完成2")
},
beforeMount() {
console.log("模板编译之前3")
},
mounted() {
// 请求数据,操作dom,放在这个里面 mounted
console.log("模板编译完成4")
},
beforeUpdate() {
console.log("数据更新之前")
},
updated() {
console.log("数据更新完毕")
},
activated() {
console.log("keep-alive缓存的组件激活时调用")
},
deactivated() {
console.log("keep-alive缓存的组件停用时调用")
},
beforeUnmount() {
// vue2.x中叫beforeDestroy
// 页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数
console.log("实例销毁之前")
},
unmounted() {
// vue2.x中叫destroyed
console.log("实例销毁完成")
}
}
</script>
<style scoped>
</style