vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
***** //code===== import { defineComponent, nextTick, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted,onActivated, onDeactivated } from 'vue' export default defineComponent({ name: "Checkquality", props: {userData: Object, businessList: Array, role: Number}, beforeCreate(){ console.log('-----beforeCreate----'); }, created(){ console.log('-----created----'); }, beforeMount(){ console.log('---beforeMount----'); }, mounted(){ console.log('---mounted----'); }, beforeDestroy(){ //beforeDestroy 该方法已删除,不执行 console.log('-----beforeDestroy----'); }, destroyed(){ //beforeDestroy 该方法已删除,不执行 console.log('-----destroyed-----'); }, beforeUnmount(){ console.log('---beforeUnmount----'); }, unmounted(){ console.log('------unmounted------'); }, beforeUpdate(){ console.log('----beforeUpdate----'); }, updated(){ console.log('----updated----'); }, setup(props) { onBeforeMount(()=>{ console.log('----onBeforeMount----'); }) onBeforeUnmount(()=>{ console.log('----onBeforeUnmount---'); }) onUnmounted(()=>{ console.log('----onUnmounted-----'); }) onActivated(()=>{ console.log('----onActivated-----') }) onDeactivated(()=>{ console.log('----onDeactivated----'); }) onBeforeUpdate(()=>{ console.log('----onBeforeUpdate----'); }) onUpdated(()=>{ console.log('----onUpdated----'); }) console.log('----setup---'); onMounted(() => { console.log('----onMounted---') }) return { ***** //code=== } } })
执行顺序如下:
----setup--- -----beforeCreate---- -----created---- ----onBeforeMount---- ---beforeMount---- ----onMounted--- ---mounted---- //组件更新 ----onBeforeUpdate---- ----beforeUpdate---- ----onUpdated---- ----updated---- //组件卸载 ----onBeforeUnmount--- ---beforeUnmount---- ----onUnmounted----- ------unmounted------
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。