Vue3.x 生命周期

向右看齐 2022-12-25 15:50 169阅读 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 条评论，169人围观）

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

相关阅读

相关 vue3：生命周期（onErrorCaptured）

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

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

相关 Vue3生命周期

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

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

相关 Vue3.x 生命周期

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

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

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

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

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

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

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

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

相关 vue 生命周期

<!DOCTYPE html> <html> <head> <title></title> <script type="

刺骨的言语ヽ痛彻心扉/ 2022年05月12日 11:14/ 0 赞/ 49 阅读

相关 vue 生命周期

1/ beforeCreate() 在创建Vue对象之前；用途动画加载 2/ created() 组件（Vue的实例化对象）创建好了，属性也绑定了，但是DOM还没生成；用

港控/mmm°/ 2022年04月22日 14:30/ 0 赞/ 227 阅读

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

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

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

相关 Vue 生命周期

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

约定不等于承诺〃/ 2021年12月15日 01:49/ 0 赞/ 190 阅读

相关 vue生命周期

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

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