首页 > 其他分享 >Vue3生命周期 及和vue2的对比

Vue3生命周期 及和vue2的对比

时间:2024-03-15 11:44:46浏览次数:28  
标签:-------- 生命周期 函数 钩子 vue2 Vue3 组件 执行

一、Vue3中的生命周期
1、setup() : 开始创建组件,在 beforeCreate 和 created 之前执行,创建的是 data 和 method

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

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

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

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

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

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

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

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 --------> one rrorCaptured(()=>{})
总结: Vue2和Vue3钩子变化不大,beforeCreate 、created 两个钩子被setup()钩子来替代。

原文链接:https://blog.csdn.net/m0_57341617/article/details/126426931

标签:--------,生命周期,函数,钩子,vue2,Vue3,组件,执行
From: https://www.cnblogs.com/zw100655/p/18075087

相关文章

  • MirageJS 使用总结 vue2上亲测使用
    注:MirageJS英文文档看的头疼,且百度上都是片段比较多,本着拿来主义的思路,就把代码粘贴上,这样不仅方便自己,也能方便大家简单介绍一下他的好处及功能MirageJS是一个用于模拟服务器端数据和网络请求的JavaScript库,它可以帮助开发者在前端环境中创建假数据、定义路由和处理请求。......
  • 【vue3】关于ref、toRef、toRefs
    1.ref函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意JS中操作值的时候,需要加.value属性,模板中正常使用即可2.toRef函数的作用:转换响应式对象中某个属性为单独响应式数据,并且转换后的值和之前是关联的(ref函数也可以转换,但值非关联)3.toRefs函数的作用:转换响......
  • vue3 批量导入excel表
    安装xlxs插件npminstallxlsx//安装import*asXLSXfrom"xlsx";//引入 批量导入里面引用了element-plus的loading和弹窗,不需要的可以去掉letexcelloading;constimportExcel=(e)=>{//导入excelvarfile=e.target.files[0];if(......
  • vue3中setup使用及其语法糖的用法
    使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可以直接在template模板中使用。.setup语法糖中新增的apidefineProps:子组件接收父组件中传来的propsdefineEmits:子组件调用父组件中的方法defineExpose:子组件暴露属性,可以在父组件中......
  • vue2与vue3的区别
     vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用了es5的一个APIObject.definepropert()对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。1.vue2和vue3双向数据绑定原理发生了改变相比与vue2,使用proxyAPI优势有:de......
  • 搭建vue3版taro以及相关api
    1.安装Taro1.使用npm或者yarn全局安装@tarojs/cli$npminstall-g@tarojs/cli$yarnglobaladd@tarojs/cli2.项目初始化:taroinitmyApp编译运行使用Taro的build命令可以把Taro代码编译成不同端的代码,然后在对应的开发工具中查看效果。Taro编译分......
  • Vue2/3 实现动态循环的select下拉框去重功能:
    需求:前面下拉框选择某个选项(如:1)了,后面的下拉框不能在有前面选中内容的该选项(即不能在出现1的下拉选项)【Vue实现动态循环出的多个select不能重复选择相同的数据】注:下面注释的都可以根据需求更改 代码<template><divid="app"><divv-fo......
  • vue3 引入 ElementUI
     vue3使用elementUI会报错,需要引入elementUIPlus。Plus官网:https://element-plus.gitee.io/zh-CN/guide/quickstart.htmlUI官网:https://element.eleme.cn/#/zh-CN/component/installation1.安装ElementUIPlusnpminstallelement-plus--savepackage.json检查。......
  • springboot3+vue3(十一)springboot多环境开发
    在开发中我们往往会遇到,本地环境、测试环境、生产环境分别一套配置。如数据库连接,端口号等配置各不相同的问题。 1、多文件配置    2、多文件分组配置如果配置文件有很多的配置信息几百行的情况,为了方便维护我们可以根据功能的情况进行分组拆分。如:服务器相关配......
  • vue3 瀑布流 vue-masonry使用方法
    npminstallvue-masonry--savemain.js文件中引入import{VueMasonryPlugin}from"vue-masonry";app.use(VueMasonryPlugin)在页面中使用<divv-masonrytransition-duration="0.3s"item-selector=".item"......