生命周期---Vue2&Vue3
简单理解为：组件从创建到被销毁的一个过程，就相当于人的一生，从出生到死亡的一个过程。
组件的生命周期
也称生命周期、生命周期函数、生命周期钩子
生命周期在特定的时刻会调用特定的函数
生命周期分为四个阶段，每个阶段都有两个钩子，现只讨论这八个钩子
Vue2的生命周期:
创建
- 创建前： beforeCreate
- 创建完毕： created
挂载
- 挂载前： beforeMount
- 挂载完毕: mounted
更新
- 更新前: beforeUpdate
- 更新完毕: updated
销毁
- 销毁前: beforeDestory
- 销毁完毕: destroyed
<template><div class="person"><h2>当前求和为:{{ sum }}</h2><button @click="addSum">点我sum+1</button></div>
</template><script>export default {name:'Person',data (){return{sum: 0}},methods:{addSum(){this.sum += 1}},// 创建前和钩子beforeCreate(){console.log('创建前');},// 创建完毕的钩子created(){console.log('创建完毕');},// 挂载前beforeMount(){console.log('挂载前');},// 挂载完毕mounted(){console.log('挂载完毕');},// 更新前beforeUpdate(){console.log('更新前');},// 更新完毕updated(){console.log('更新完毕');},// 销毁前beforeDestroy(){console.log('销毁前');},// 销毁完毕destroyed(){console.log('销毁完毕');},}
</script>
Vue3的生命周期
创建
- setup
挂载
- 挂载前: onBeforeMount
- 挂载完毕： onMounted
更新
- 更新前： onBeforeUpdate
- 更新完毕： onUpdated
卸载
- 卸载前： onBeforeUnmount
- 卸载完毕： onUnmounted
<template><div class="person"><h2>当前求和为:{{ sum }}</h2><button @click="addSum">点我sum加1</button></div>
</template><script lang="ts" setup name="Person">import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, onBeforeUnmount,onUnmounted,ref} from 'vue'let sum = ref(0)function addSum(){sum.value += 1}// 创建console.log('创建');// 挂载前onBeforeMount(()=>{console.log('挂载前');})// 挂载完毕onMounted(()=>{console.log('子---挂载完毕');})// 更新前onBeforeUpdate(()=>{console.log('更新前');})// 更新完毕onUpdated(()=>{console.log('更新完毕');})// 卸载前onBeforeUnmount(()=>{console.log('卸载前');})// 卸载完毕onUnmounted(()=>{console.log('卸载完毕');})
</script>
<style>
</style>
App.vue是根组件，必须等所有子组件和子子组件挂载完成（深度遍历），根组件才算完成
创建项目
Vue2
安装脚手架： npm i -g @vue/cli
创建项目： vue create vue2_project
package.json里面有serve，所以启动项目就是: npm run serve
进入刚刚创建的项目里面，然后来启动
注意：这两条代码写进项目里可以忽略警告!
只关闭这一行代码警告
// eslint-disable-next-line关闭以下所以代码警告
/* eslint-disable */
