首页 > 其他分享 >Vue3 生命周期钩子

Vue3 生命周期钩子

时间:2024-10-17 14:10:52浏览次数:6  
标签:生命周期 函数 钩子 之前 Vue3 组件 执行


1、setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数;

3、onMounted() : 组件挂载完成后执行的函数;

4、onBeforeUpdate(): 组件更新之前执行的函数;

5、onUpdated(): 组件更新完成之后执行的函数;

6、onBeforeUnmount(): 组件卸载之前执行的函数;

7、onUnmounted(): 组件卸载完成后执行的函数;

8、onActivated(): 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;

9、onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

标签:生命周期,函数,钩子,之前,Vue3,组件,执行
From: https://www.cnblogs.com/Godfather-twq/p/18472122

相关文章

  • Vue3中 watch、watchEffect 详解
    Vue3中watch、watchEffect详解   1.watch的使用 监听ref定义的响应式数据 <template><div><div>值:{{count}}</div><button@click="add">改变值</button></div></template><script>import{r......
  • Vue3也能用上Vue2写的组件
    文章目录     文章目录概要整体架构流程参考博客实现效果图技术细节小结概要需求:开发一个问题反馈组件,要求企微连线负责人、跳转页面反馈问题...组件可以安装在Vue2、Vue3、React等项目里整体架构流程创建webpack-simple项目,编写组件,部署并发布npm包......
  • vue3简单使用threejs立方缓冲几何体(BoxGeometry)
    文章目录前言一、安装three二、使用步骤1.导入three、建立场景、相机和渲染器2.添加立方体3.渲染循环三、其他1.轨道控制器OrbitControls和坐标轴辅助对象AxesHelper2.GUI创建可交互的控件(点击全屏+退出全屏)3.监听窗口的变化执行一些重置操作四、完整代码五、效......
  • Nuxt.js 应用中的 modules:done 事件钩子详解
    title:Nuxt.js应用中的modules:done事件钩子详解date:2024/10/16updated:2024/10/16author:cmdragonexcerpt:modules:done是Nuxt.js中一个重要的生命周期钩子,在Nuxt应用初始化期间触发。该钩子允许开发者在用户定义的模块安装完成后执行特定操作,如初始化后续配......
  • bean 生命周期
    生命周期实例化:通过反射调用构造方法创建Bean实例属性赋值:把配置文件的值或IOC容器中的其他bean注入属性中初始化:bean进入初始化阶段,spring提供了3种方式对bean加工处理@PostConstruct注解指定初始化方法实现InitializingBean接口,复写afterPropertiesSet......
  • flask 钩子函数
    什么是钩子(中间件Middleware)钩子或叫钩子函数,是指在执行函数和目标函数之间挂载的函数,框架开发者给调用方提供一个point-挂载点,一种AOP切面编程思想.常用的钩子函数before_first_request:处理第一次请求之前执行before_request:在每次请求之前执行,通常使......
  • vue3使用pinia仓库解构赋值响应式丢失的解决方式
    代码storeimport{defineStore}from"pinia";import{ref}from"vue";exportconstuseMyTestStore=defineStore('mytestStore',()=>{//stateconstcount=ref(0);constcount2=ref(1);constincrement2......
  • Vue3 + Openlayers10示例 台风轨迹和台风圈
    前言假装已经完成了vue3和Openlayers10开发环境的搭建,如果有需要,可搜索vue+Openlayers环境搭建的相关文章。本示例基于Vue3和Openlayers10的环境,实现台风轨迹和台风圈的效果。一、安装插件安装Element-plus插件,其实只在台风列表的地方用到了el-checkbox,可根据实际需......
  • vue3+h5+echarts引入折线图
     实现效果:1.引入echarts,在终端输入命令npminstallecharts--save2.安装成功后直接复制以下代码即可<template><divref="chartDom"class="echart"id="main"></div></template><scriptsetup>import{onMounted,......
  • vue3+vite+ts+vue3-qr-reader实现移动端h5+pc端调起摄像头核销二维码
    1、首先我们看示例图:h5:pc:  2、我们开始做第一步就是装依赖:yarnadd vue3-qr-reader或者npminstall vue3-qr-reader我记得装完后还需要装一个 yarnadd-Dsass 3、封装一个组件公用:组件位置你们自己定我写在了components/QrScanner/ind......