Vue3生命周期

于 2023-05-12 15:38:03 发布
阅读量712 收藏
点赞数
分类专栏： Vue3 Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42289080/article/details/130642661
版权
Vue 同时被 2 个专栏收录
29 篇文章 2 订阅
订阅专栏
Vue3
16 篇文章 0 订阅
订阅专栏

一、两种类型

  • vue3 兼容了 vue2 的 选项式API（optionsAPI） 生命周期选项，增加了 组合式（CompositionAPI） 的生命周期钩子
  • 通过官方的图不难看出两者的执行先后顺序
    在这里插入图片描述

二、两者对比

  • CompositionAPI 的所有生命周期钩子都应该在组件的 setup() 阶段被同步调用（写在setup里面）
  • setup 可以看做是 beforeCreate、created 两个的合并
  • 其他生命周期主要是名字变化
  • 相比之下肯定建议用新API，毕竟官网说2023年底就不再维护vue2了
OptionsAPICompositionAPI
beforeCreatesetup
createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
activatedonActivated
deactivatedonDeactivated
errorCapturedonErrorCaptured
Unique·Blue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
教程10 Vue3的生命周期与方法（Typescript）+ Setup语法糖详解 + setup中的生命周期钩子
最新发布
boxuestudio的博客
09-25 3115
教程10 Vue3的生命周期与方法（Typescript）+ Setup语法糖详解 + setup中的生命周期钩子
学习vue3系列生命周期
热门推荐
前端精髓
08-08 3万+
之前已经介绍了 vue3 的相关知识点：ref，reactive，computed，watch，watchEffect，toRef，toRefs 这些响应式的API，相信大家对 vue3 已经有一定的理解了。 生命周期 除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API。 1、beforeCreate -> 使用 setup() 2、created -> 使用 setup() 3、beforeMou.
Vue2和Vue3的生命周期一起执行的顺序
前端界的小学生
10-05 1992
Vue2和Vue3的生命周期一起执行的顺序
vue3--生命周期
KID963931445的博客
01-30 569
vue3的生命周期
vue3生命周期及setup介绍
weixin_43867717的博客
09-23 9262
setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。props : {// 注意这里不要解构props，这样会使解构出来的变量失去响应性。如果一定要解构需要使用响应式api转发下。
vue3+ts (源码+笔记+生命周期截图)
02-14
vue3+ts (源码+笔记+生命周期截图)
vue组件生命周期详解
08-28
主要为大家详细介绍了vue组件生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3.0生命周期的示例代码
10-14
主要介绍了vue3.0生命周期的相关知识，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
浅析Vue 生命周期
08-27
主要介绍了Vue 生命周期的过程，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue父子组件生命周期执行顺序
細水、長流√的专栏
11-06 2394
vue2 中 执行顺序 ：vue3 中 执行顺序对应关系。
Vue——vue3中setup() 组件中引入生命周期函数写法
qq_43201350的博客
10-07 820
Vue——vue3中setup() 组件中引入生命周期函数写法
vue父子组件&继承组件的生命周期以及应用
程序员秋风的博客
09-18 1万+
父子组件的生命周期顺序今天在做项目时候，发现了一个问题，那就是父子组件的执行顺序问题，在我印象里，肯定是先执行父组件的生命周期，再执行子组件的生命周期，但其实并不是这样的。我们来看代码：我们先用vue-cli搭建一个项目。（用什么搭建并不重要，我这里为了快速模拟就偷懒不自己配置webpack了） 父组件: app.vue<template> <div id="app"> <hello>
vue3-基础-父子组件生命周期(life-cycle)
YogaMiller的博客
11-07 662
vue3生命周期
Vue3 --父子组件生命周期
Sun_blog
07-15 2355
Vue3 --父子组件生命周期# 渲染加载过程 ```mermaid graph LR 父组件beforeCreate --> 父组件created 父组件created --> 父组件beforeMount 父组件beforeMount --> 子组件beforeCreate 子组件beforeCreate --> 子组件created 子组件created --> 子组件beforeMount 子组件beforeMount--> 子组件mounted 子组件mounted --> 父组件mount
vue cli3 使用less变量（Variable xxx is undefined）
weixin_42289080的博客
03-29 1万+
vue cli3初始化构建项目时，自定义选择使用less作为css预处理器之后，就会默认安装less、less-loader，并且直接可以在组件中正常使用嵌套结构书写css了。 但是，当我们需要使用less变量时，比如下面的情况 1. 我新建了一个common.less文件，并在main.js中引入它： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210329160038449.png) 2. common.less中任意定义一个变量，比如： ![在这里插入图片描
如何修改 antd vue 单个组件的默认样式
weixin_42289080的博客
03-01 7584
Ant Design Vue地址：https://www.antdv.com/docs/vue/introduce-cn/ 刚接触Ant Design Vue的童鞋们可能会有这样的问题，不就是修改默认的组件样式吗，为什么一会生效，一会又不生效。希望看完这个文章，会给你一些收获~ 一、想要修改组件的默认样式，首先你需要知道组件是渲染在哪里的 这个组件是渲染在当前页面内部，还是脱离vue根节点单独渲染？（根节点默认id=“app”） 这个问题的答案很容易得到，打开文章顶部的antdv官方文档，任意选中组件，F1
elementUI——el-form表单数据校验（包含数组循环）
weixin_42289080的博客
05-11 7351
prop需要对应到表单数据的具体的key，数组可通过索引锁定
优化打包chunk-vendor.js文件体积过大
weixin_42289080的博客
08-24 7004
参考链接： https://www.cnblogs.com/love314159/p/14275666.html，点击跳转 当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。 // 在vue-config.js 中加入 ..... const isProduction = process.env.NODE_ENV === 'production' module
vue 3 生命周期
07-28
回答: 在Vue3中，生命周期钩子函数的数量和名称发生了变化。新增了两个生命周期钩子函数：beforeUnmount和unmounted，同时将之前的beforeCreate和created合并为一个setup钩子函数。\[1\]在Vue3中，引入了一个新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值