0


vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序

<template>*****//code=====</template><script>import{ defineComponent, nextTick, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted,onActivated, onDeactivated }from'vue'exportdefaultdefineComponent({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------
标签: vue.js 前端 vue3

本文转载自: https://blog.csdn.net/shengmeshi/article/details/140501366
版权归原作者 shengmeshi 所有, 如有侵权,请联系我们删除。

“vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序”的评论:

还没有评论