对生命周期的理解
注意：以下只说明的常用的几个组件生命周期，并不是所有。
为了测试生命周期，下载了对应vue2所需要的 vue.js devtools 6.6.4 来源于谷歌商城，这里有时不显示注意清理缓存，或者刷新，已经卸载换了最新版本
概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子
规律：生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。
Vue2的生命周期
创建阶段：beforeCreate、created
挂载阶段：beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed
参考代码（ /* eslint-disable */ //取消一下的代码检查）：
<!-- 组件App -->
<template>
<div id="app">
<PersonComponents v-if="isShow"/>
</div>
</template>
<script>
import PersonComponents from './components/PersonComponents.vue'
export default {
name: 'App',
components: {
PersonComponents
},
data() {
return {
isShow:true
}
}
}
</script>
<!-- 组件PersonComponents -->
<template>
<div class="person">
<h2>当前求和为: {{ sum }}</h2>
<button @click="add">点我sum+1</button>
</div>
</template>
<script>
export default {
/* eslint-disable */ //取消代码检查
name: 'PersonComponents',
//数据
data() {
return {
sum: 0
}
},
//方法
methods:{
add() {
this.sum += 1;
}
},
//创建前
beforeCreate() {
console.log('beforeCreate: 创建前');
},
//创建后
created () {
console.log('created: 创建完毕');
},
//挂载（把组件塞进浏览器）前
beforeMount() {
console.log('beforeMount: 挂载前');
},
//挂载后
mounted() {
console.log('mounted: 挂载后');
},
//更新前
beforeUpdate() {
console.log('beforeUpdate: 更新前');
},
//更新后
updated() {
console.log('updated: 更新后');
},
//销毁前
beforeDestroy() {
console.log('beforeDestroy: 销毁前');
},
//销毁后
destroyed() {
console.log('destroy: 销毁后');
}
}
</script>
<style>
.person {
background-color: skyblue;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>
Vue3的生命周期
注意：先子后父
创建阶段：setup
挂载阶段：onBeforeMount、onMounted
更新阶段：onBeforeUpdate、onUpdated
卸载阶段：onBeforeUnmount、onUnmounted
常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)
参考代码：
<!-- App父组件 -->
<template>
<div class="app">
<Person v-if="show"/>
</div>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue';
import { ref, onMounted } from 'vue';
//数据
let show = ref(true);
//挂载完毕
onMounted(() => {
console.log('父-挂载完毕');
})
</script>
<!-- Person子组件 -->
<template>
<div class="person">
<h2>当前求和为：{{ sum }}</h2>
<button @click="add">点我sum+1</button>
</div>
</template>
<script setup lang="ts" name="Person">
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from 'vue'
//数据
let sum = ref(0);
//方法
function add() {
sum.value += 1;
}
//创建 setup 就是创建
console.log('创建');
//挂载
onBeforeMount(() => {
console.log('挂载前');
})
//挂载完毕
onMounted(() => {
console.log('子-挂载完毕');
})
//更新之前
onBeforeUpdate(()=>{
console.log('更新之前');
})
//更新完毕
onUpdated(()=>{
console.log('更新完毕');
})
//卸载之前
onBeforeUnmount(()=>{
console.log('卸载之前');
})
//卸载完毕
onUnmounted(()=>{
console.log('卸载完毕');
})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px; /* 盒子阴影 */
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
常用钩子
常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)