目录

1、VUE2的生命周期

1.1、创建（创建前，创建完毕）

1.2、挂载（挂载前，挂载完毕）

1.3、更新（更新前，更新完毕）

1.4、销毁（销毁前，销毁完毕）

2、VUE3的生命周期

2.1、创建（setup）

2.2、挂载（onBeforeMount、onMounted）

2.3、更新（onBeforeUpdate、onUpdated）

2.4、卸载（onBeforeUnmount、OnUnmounted）

3、父和子的生命周期

---

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。 

1、VUE2的生命周期

• 创建阶段：beforeCreate、created
• 挂载阶段：beforeMount、mounted
• 更新阶段：beforeUpdate、updated
• 销毁阶段：beforeDestory、destroyed

1.1、创建（创建前，创建完毕）

<template>
<Person/>
</template><script>
import Person from './components/Person.vue'
export default {name: 'App',components:{Person}
}
</script>

<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div class="person">
<h2>当前求和为：{{ sum }}</h2>
<button @click="add">点我sum+1</button>
</div></template>
<script>export default {// eslint-disable-next-line vue/multi-word-component-namesname: 'person',data(){return {sum: 1}},methods:{add(){this.sum += 1}},//创建前的钩子beforeCreate(){console.log('创建前')},//创建完毕的钩子created(){console.log('创建完毕')}
}
</script><style scoped>.person {background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px;}
</style>