【Vue】从vue2到vue3，生命周期函数有何变化之详解

vue2与vue3生命周期的对比：

Vue2--------------Vue3

beforeCreate—————–>setup()
created————————>setup()
beforeMount—————–>onBeforeMount
mounted—————-------> onMounted
beforeUpdate -————–> onBeforeUpdate
updated -—————------> onUpdated
beforeDestroy ————> onBeforeUnmount
destroyed ——————> onUnmounted

activated --------------------> onActivated
deactivated -----------------> onDeactivated
errorCaptured -------------> onErrorCaptured

总结：Vue2和Vue3钩子变化不大，删除了beforeCreate、created两个钩子使用setup()钩子来替代。

vue2的生命周期

• new Vue()
  创建一个Vue实例

• Init Events&Lifecycle
  创建前：
  DOM对象：el：undefined
  data对象： data：undefined
  声明的变量：message：undefined

• Init injections & reactivity
  创建完毕：
  DOM对象：el：undefined
  data对象： data：[object Object]
  声明的变量：message：undefined

整体阶段开始编译模版，根据data中的数据和指令生成HTML，此时还没有开始渲染，仅存在于内存中。

• beforeMount
  挂载前
  完成模版编译，但是还未挂载到页面。
  DOM对象：el：undefined
  data对象： data：[object Object]
  声明的变量：message：“Vue的生命周期”
• mounted
  挂载结束，已渲染到页面。
  DOM对象：el：[object HTML DivElement]
  data对象：data：[object Object]
  声明的变量：message：”Vue的生命周期“
• beforeUpdate
  更新前状态
  状态更新之前执行，此时data中的状态值是最新的，但界面还没开始渲染，是旧数据
  DOM对象：el：[object HTMLDivElement]
  data对象：data：[object Object]
  声明的变量：message：“被修改了”
• updated
  更新完成
  状态更新完成后执行，此时界面显示data的最新数据，即界面已被渲染
• beforeDestroy
  销毁前
  实例准备销毁，但还没被销毁，实例属性方法还可以用
  DOM对象：el：[object HTMLDivElement]
  data对象：data：[object Object]
  声明的变量：message：“Vue的生命周期”
• destoryed
  销毁完成
  实例已销毁，所有内容均不可使用
  DOM对象：el：[object HTMLDivElement]
  data对象：data：[object Object]
  声明的变量：message：“Vue的生命周期”

beforeCreate()：实例在内存中被创建出来，还没有初始化好data和methods属性
create()：实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模版。
beforeMount()：已经完成了模版的编译，还没有挂载到页面中。
mounted()：将编译好的模版挂在到页面指定的容器中显示。
beforeUpdate()：状态更新之前执行函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为还没有开始重新渲染DOM节点。
updated()：此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了！
beforeDestroy()：实例被销毁之前。
destroyed()：实例销毁后调用，Vue实例指示的所有东西都会解绑，所有的事件监听器都会被移除，所有的子实例也都会被销毁。组件已经被完全销毁，此时组件中所有的data、methods以及过滤器，指令等，都已经不可用了。

在实际开发中的使用：

beforeCreate: 可以在这函数中初始化加载动画
created：做一些数据初始化，实现函数自执行
mounted：调用后台接口进行网络请求，拿回数据，配合路由钩子做一些事情
destoryed：当前组件已被删除，清空相关内容
mounted中做网络请求和重新赋值，在destoryed中清空页面数据。

还有个比较特殊的钩子函数nextTick(),数据更新后的dom操作，写在该函数里面

vue3的生命周期

setup()：开始创建组件之前，在beforeCreated和created之前执行，创建的是data和method
onBeforeMount()：组件挂载到节点上之前执行的函数；
onMounted()：组件挂载完成后执行的函数；
onBeforeUpdate()：组件更新之前执行的函数；
onUpdate()：组件更新完成之后执行的函数；
onBeforeUnmount()：组件卸载之前执行的函数；
onUnmounted()：组件卸载完成后执行的函数；
onActivated()：被包含在< keep-alive >中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated()：比如从A组件，切换到B组件，A组件消失时执行；
onErrorCaptured()：当捕获一个来自子孙组件的异常时激活钩子函数。

代码：

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
  name: 'Demo',
  setup() {
    //数据
    let sum = ref(0)
    //通过配置项的形式使用生命周期钩子
    onBeforeMount(()=>{
      console.log('----onBeforeMount----')
    })
    
    onMounted(()=>{
      console.log('----onMounted----')
    })
    onBeforeUpdate(()=>{
      console.log('----onBeforeUpdate----')
    })
    onUpdated(()=>{
      console.log('----onUpdated----')
    })
    onBeforeUnmount(()=>{
      console.log('----onBeforeUnmount----')
    })
    onUnmounted(()=>{
      console.log('----onUnmounted----')
    })
    //返回一个对象
    return{
      sum,
    }
  }
}
</script>