第七章、Vue3中生命周期的变化

一、Vue3中生命周期示意图

二、Vue3中生命周期中API变化

• setup 代替了 beforeCreate,created,如果在options api 中书写，会在beforeCreate之前执行

• mounted/beforeMount/beforeUpdate/updated ,都改成onxxx,如onMounted

• beforeDestroy 改成 onBeforeUnmount;

• destroyed 改成onUnmounted

三、生命周期重要API 讲解

• Vue2.x中beforeCreate会在组件初始化完成,props解析后调用,此时data，computed都不可访问

• Vue2.x中created 会在组件处理完所有与数据有关的选项后调用： computed,watch,响应式数据都完成后；但此时$el(2.x)还未挂载，不可访问；

• onBeforeMount: 此时已完成响应状态设置，DOM即将进行首次渲染;Vue2中$el不可访问；

• onMounted此时组件已挂载,可获取DOM节点; Vue2.x中 $el可访问（2.x)；Vue3中setup没有this,可通过ref获取组件根DOM节点

<template>
  <div ref="divTag">
    <h3>Foo</h3>
  </div>
</template>
setup(prop,ctx){
  const divTag = ref(null)
  onMounted(() =>{
    console.log(div.value)
  })
  return{ divTag }
}    

• onBeforeUnmount 组件实例被卸载之前调用。

• onUnmounted 组件卸载后调用，此时可以手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接等