vue3生命周期

---

一、Vue3生命周期

1.选项式API

<script>
export default{
  data(){
    return{
    }
  },
beforeCreate(){
  console.log("beforeCreate");
},
created(){
  console.log("created");
}
}
</script>

2.组合式API

<script>
import { onBeforeMount, onMounted} from "vue";
export default {
  setup(){
    onBeforeMount(()=>{
      console.log("onBeforeMount");
    })
  onMounted(()=>{ 
    console.log("onMounted");
  })
}
}
</script>

3.生命周期

1. onBeforeMount：在挂载之前被调用，渲染函数render首次被调用
2. onMounted：组件挂载时调用
3. onBeforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。
4. onUpdated：因数据更改导致的虚拟DOM重新渲染和打补丁时调用
5. onBeforeUnmount：在卸载组件实例之前调用，此阶段的实例依旧是正常的。
6. onUnmounted：注册一个在组件被卸载后调用的回调
7. onActivated：被keep-alive缓存的组件激活时调用
8. onDeactivated：被keep-alive缓存的组件停用时调用
9. onErrorCaptured：当捕获一个来自子孙组件的错误时被调用，有三个参数：错误对象、发生错误的组件实例、一个包含错误来源信息的字符串；此钩子会返回false来阻止改错误继续向上传播。