Vue3.x 生命周期

向右看齐 2022-12-25 15:50 155阅读 0赞

Vue2中有 `beforeCreate` 、`created` 、`beforeMount` 、`mounted` 、`beforeUpdate` 等生命周期函数

而在Vue3中，这些生命周期部分有所变化，并且调用的方式也有所改变，下面放上一张变化图来简单了解一下

<table> 
 <thead> 
  <tr> 
   <th>Vue2</th> 
   <th>Vue3</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>setup</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>setup</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>onBeforeMount</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>onMounted</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>onBeforeUpdate</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>onUpdated</td> 
  </tr> 
  <tr> 
   <td>beforeDestory</td> 
   <td>onBeforeUnmount</td> 
  </tr> 
  <tr> 
   <td>destoryed</td> 
   <td>onUnmounted</td> 
  </tr> 
 </tbody> 
</table>

Vue3的这些生命周期调用也很简单，同样是先从 `vue` 中导入，再进行直接调用

<template>
      <div id="app"></div>
    </template>
    
    <script>
    import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, unMounted} from 'vue'
    export default {
      name: 'App',
      setup() {
          onBeforeMount(() => {
              // 在挂载前执行某些代码
          })
    
          onMounted(() => {
              // 在挂载后执行某些代码
          })
    
          onBeforeUpdate(() => {
              // 在更新前前执行某些代码
          })
    
          onUpdated(() => {
              // 在更新后执行某些代码
          })
    
          onBeforeUnmount(() => {
              // 在组件销毁前执行某些代码
          })
    
          unMounted(() => {
              // 在组件销毁后执行某些代码
          })
    
          return {}
      }
      
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3：生命周期（onErrorCaptured）

一、背景当项目如果发生报错，影响程序体验。如果能以捕获的方式得到错误信息，而且还能定位问题，这样就好了，本文介绍onErrorCaptured实现我们想要的效果。 vue

小鱼儿/ 2024年03月26日 17:48/ 0 赞/ 61 阅读

相关 Vue3生命周期

文章目录前言钩子函数代码展示 -------------------- 前言组件从创建到销毁的整个过程就是生命周期 ![请添加图片

古城微笑少年丶/ 2023年10月13日 08:52/ 0 赞/ 7 阅读

相关 Vue3.x 生命周期

Vue2中有 `beforeCreate` 、`created` 、`beforeMount` 、`mounted` 、`beforeUpdate` 等生命周期函数而在Vu

向右看齐/ 2022年12月25日 15:50/ 0 赞/ 156 阅读

相关 Vue 3 生命周期完整指南

-------------------- highlight: a11y-dark theme: condensed-night-purple > 作者：Micha

红太狼/ 2022年11月15日 04:58/ 0 赞/ 138 阅读

相关 vue 框架学习（3）-生命周期

一、什么是MVVM MVVM是Model-View-ViewModel的简写，体现在框架上的样子如下：（图片是在网上找的） ![在这里插入图片描述][watermar

短命女/ 2022年10月28日 15:27/ 0 赞/ 138 阅读

相关 Vue2.x之生命周期详解

目录直通车一、分三步流程解读 1、初始化显示 2、更新状态 3、销毁Vue实例二、常用的生命周期方法三、完整流程解读实例代码完整生命周期实例

左手的ㄟ右手/ 2022年04月04日 10:08/ 0 赞/ 230 阅读

相关 Vue生命周期

生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue

迈不过友情╰/ 2022年02月19日 18:13/ 0 赞/ 333 阅读

相关 Vue 生命周期

/\ \ @version: V.1.0.0.1 \ @Author: fenggang \ @Date: 2019-06-18 19:38:19 \ @LastEdi

浅浅的花香味﹌/ 2021年12月17日 12:45/ 0 赞/ 341 阅读

相关 vue生命周期

总览 ![331769-20180909094731362-16918169.png][] vue的生命周期可简单的从上边这张图了解，红圆角矩形就是生命周期函数相应

ゞ浴缸里的玫瑰/ 2021年12月12日 07:37/ 0 赞/ 436 阅读

相关 VUE生命周期

\[vue实例的生命周期\](https://cn.vuejs.org/v2/guide/instance.html \实例生命周期) \+ 什么是生命周期：从Vue实例

左手的ㄟ右手/ 2021年12月09日 02:23/ 0 赞/ 405 阅读