阅读量:1
<template> ***** //code===== </template> <script> 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=== } } }) </script> <style lang="less"> </style>
执行顺序如下:
----setup--- -----beforeCreate---- -----created---- ----onBeforeMount---- ---beforeMount---- ----onMounted--- ---mounted---- //组件更新 ----onBeforeUpdate---- ----beforeUpdate---- ----onUpdated---- ----updated---- //组件卸载 ----onBeforeUnmount--- ---beforeUnmount---- ----onUnmounted----- ------unmounted------