VUe2.0 和 Vue3.0 的生命周期作对比
beforeCreate -> 请使用 setup() created -> 请使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted errorCaptured -> onErrorCaptured
我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
setUp这个生命周期发生在beforeCreate和created之前的哈。
两种形式的生命周期函数是可以共存，它们都会被执行。
<template> <div> 生命周期 </div> </template> <script> import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue"; export default { name: "App", setup() { console.log("类似于created") // 挂载的生命周期 onBeforeMount(()=>{ console.log("Vue3.0类似于beforeMount "); }) onMounted(()=>{ console.log("Vue3.0类似于mounted "); }) // 跟新阶段的生命周期 onBeforeUpdate(()=>{ console.log("Vue3.0类似于beforeUpdate "); }) onUpdated(()=>{ console.log("Vue3.0类似于 updated "); }) // 销毁阶段生命周期 onBeforeUnmount(()=>{ console.log("Vue3.0类似beforeDestory "); }) onUnmounted(()=>{ console.log("Vue3.0类似于destoryed "); }) }, beforeCreate(){ console.log( 'vue2.0 beforeCreate' ) }, created(){ console.log( 'vue2.0 created' ) }, beforeMount(){ console.log( 'vue2.0 beforeMount' ) }, mounted(){ console.log( 'vue2.0 mounted' ) }, beforeUpdate(){ console.log( 'vue2.0 beforeUpdate' ) }, updated(){ console.log( 'vue2.0 updated' ) }, // vue3中你仍然可以去使用vue2的生命周期。 // 只是需要注意的是:beforeDestroy==>变成了 beforeUnmount // destroyed==> unmounted // 我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~ // setUp这个生命周期发生在beforeCreate和created之前的哈。 beforeUnmount() { console.log( 'vue2.0 beforeDestroy' ) }, //destroyed==> unmounted unmounted(){ console.log( 'vue2.0 destroyed' ) } }; </script>
