当前位置: 首页 > news >正文

vue3生命周期

一、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(): 当捕获一个来自子孙组件的异常时激活钩子函数。

二、Vue2.X和Vue3.X对比
vue2           ------->      vue3
 
beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})
errorCaptured  -------->      onErrorCaptured(()=>{})
总结: Vue2和Vue3钩子变化不大,删除了beforeCreate 、created  两个钩子使用setup()钩子来替代。

http://www.lryc.cn/news/25249.html

相关文章:

  • Python学习笔记10:开箱即用
  • 详解JAVA反射
  • 在nestjs中进行typeorm cli迁移(migration)的配置
  • 前端工程构建问题汇总
  • 某马程序员NodeJS速学笔记
  • SpringMVC DispatcherServlet源码(6) 完结 静态资源原理
  • 2023年全国最新会计专业技术资格精选真题及答案9
  • Web3中文|把Web3装进口袋,Solana手机Saga有何魔力?
  • 【配电网优化】基于串行和并行ADMM算法的配电网优化研究(Matlab代码实现)
  • 数据结构初阶 -- 顺序表
  • uniapp:3分钟搞定在线推送uni.createPushMessage,uni.onPushMessage
  • C/C++开发,无可避免的多线程(篇一).跨平台并行编程姗姗来迟
  • 如何把照片的底色修改为想要的颜色
  • 【高效办公】批量生成固定模板的文件夹名称
  • redis的集群方式
  • 温控负荷的需求响应潜力评估及其协同优化管理研究(Matlab代码实现)
  • 模电学习9. MOS管使用入门
  • 【算法】【数组与矩阵模块】正数组中累加和为给定值的最长子数组长度,空间复杂度O(1)解法
  • 3.1.2 创建表
  • 使用netlify实现自动化部署前端项目(无服务器版本)
  • MATLAB点云数据处理(二十九):可视化点云之pcshow参数详解与快捷键操作
  • 顺序表——重置版
  • PyQt5自然语言处理入门案例笔记
  • 使用 CSS 替换表行颜色?
  • 智能家居控制系统
  • Linux 进程:fork()与vfork()的对比
  • 环境搭建02-Ubuntu16.04 安装CUDA和CUDNN、CUDA多版本替换
  • HOT100--(3)无重复字符的最长子串
  • vue keep-alive多层级路由支持
  • 从源码角度看React-Hydrate原理