VUE3-生命周期

最新推荐文章于 2025-03-20 00:05:39 发布

原创最新推荐文章于 2025-03-20 00:05:39 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue3 #生命周期钩子

文章详细介绍了Vue3中组件的生命周期变化，setup函数替代了beforeCreate和created，同时展示了选项式API和组合式API两种生命周期钩子的写法。在Vue3中，beforeDestroyed变为beforeUnmount，unmounted代替了destroyed，且提供了如onBeforeMount、onMounted等新的生命周期方法。

VUE3-生命周期

生命周期图

钩子函数写法

由于setup是在before Created和created之前的所以setup代替了他们
vue2中的destroyed命名成了unmounted, beforeDestroyed 命名成了 beforeUnmount

选项式API

export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  update() {
    console.log('update');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}

组合式API

export default {
  // 没有了create的生命周期钩子
  // 由于setup是在before Created和created之前的所以setup代替了他们
  onBeforeMount(() => {
    console.log('onBeforeMount');
  })

  onMounted(() => {
    console.log('onMounted');
  })

  onBeforeUpdate(() => {
    console.log('onBeforeUpdate');
  })

  onUpdated(() => {
    console.log('onUpdated');
  })
  onBeforeUnmount(() => {
    console.log('onBeforeUnmount');
  })

  onUnmounted(() => {
    console.log('onUnmounted');
  })
}

代码

<template>
  <div>
    生命周期钩子（Lifecycle Hooks）
  </div>
</template>
<script>
  import {
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onMounted,
    onUnmounted,
    onUpdated
  } from 'vue';
  export default {
    name: 'lifeCycleHooks',
    setup() {
      console.log('setup...');
      // 没有了create的生命周期钩子
      // 由于setup是在before Created和created之前的所以setup代替了他们
      onBeforeMount(() => {
        console.log('onBeforeMount');
      })

      onMounted(() => {
        console.log('onMounted');
      })

      onBeforeUpdate(() => {
        console.log('onBeforeUpdate');
      })

      onUpdated(() => {
        console.log('onUpdated');
      })
      onBeforeUnmount(() => {
        console.log('onBeforeUnmount');
      })

      onUnmounted(() => {
        console.log('onUnmounted');
      })
      return {}
    },

    // 在vue3中，当生命周期钩子函数有两种写法
    // 第一种写法：选项式API
    // 第二种写法：组合式API
    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    },
    beforeUpdate() {
      console.log('beforeUpdate');
    },
    update() {
      console.log('update');
    },
    beforeUnmount() {
      console.log('beforeUnmount');
    },
    unmounted() {
      console.log('unmounted');
    }
  }
</script>