vue3.0生命周期以及新增生命周期API

已于 2022-03-17 18:02:55 修改
阅读量1.3k 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-03-17 16:00:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39838846/article/details/123551915
版权 
				                            new Vue ()
				                          （新建Vue实例）
				                                 i
				                                        
				                                
				                              初始化
				                           事件&生命周期    ⬅️     setup方法
				          beforeCreate ⬅️       ⬇️
				                                ⬇️
				                                ⬇️
				                              初始化
				                             注入&校验
				     created         ⬅️         ⬇️
				                                ⬇️
				                                ⬇️
				                             是否指定
				                              ”el“选项                 
				                             是 ⬇️   
				                               ⬇️       
				                                ⬇️  ⬇️  ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️     否
				                             是否指定                  当调用vm.$mount(el)函数时候
				                        ”template“选项？
                    是 ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️  `否
           将template编译                        ⬇️                           将el外部的HTML
             到render函数中                      ⬇️                         作为template编译
                                                ⬇️ 
                                                ⬇️ 
                                                ⬇️ 
         beforeMount  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️                     
                                                ⬇️ 
                                                ⬇️ 
                                                ⬇️ 
                                            创建vm.$el
                                            并用其替换”el“
                                                ⬇️ 
                                                ⬇️ 
                                                ⬇️ 
         mounted  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️  ⬅️                     
                                                ⬇️ 
                                                ⬇️ 
                                                ⬇️ 
                                              挂载完毕             当 data被修改时首先触发beforeUpdate,接下来 虚拟DOM重新渲染并
                                                  ⬇️                    应用更新，有新的页面会触发updated这个函数
                                                  ⬇️ 
                                                  ⬇️ 
                                      当调用vm.$destroy()函数时     
                                                  ⬇️ 
~~beforeDestroy~~(删除)   ⬅️  ⬅️  ⬅️  ⬅️            ⬇️ 
        ⬇️                                         ⬇️                            
beforeUnmount （改为）                              ⬇️   
                                                解除绑定
                                              销毁子组件以及
                                               事件监听器
                                                    ⬇️ 
                                                    ⬇️ 
                                                    ⬇️ 
~~destroyed~~  ((已删除)           ⬅️  ⬅️  ⬅️  ⬅️   销毁完毕
                         ⬇️ 
                 unmounted
                     其中beforeDestroy修改为  beforeUnmount ,destroyed改为了unmounted;
                          这样写纯粹更好的语义化，因为一个组件就是mount，unmount的过程。

vue2和vue3的生命周期对应
vue2 vue3

 beforeCreate   -------->     use setup()
 created   ---------------------> use setup()
 beforeMound ---------------> onBeforeUnmount
 mounted------------------>onMounted
 beforeUpdate------------>onBeforeUnmouint
 updated----------------->onUpdated
 beforeDestroy------------>onBeforeUnmount
 destroyed--------------------> onUnmounted
 activated----------------------->onActivated
 deactivated--------------------->onDeactivated
 errorCaptured-------------------->onErrorCaptured
 //added
 onRenderTracked
 onRenderTriggered
唐长老521
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue3生命周期的使用、了解以及用途（详细版）
老余的博客
02-22 1万+
每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
Vue3中的自定义指令（defineDirective）和钩子函数（created、mounted、updated(1)
最新发布
2401_84435768的博客
05-16 678
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
Vue3中的自定义指令（defineDirective）和钩子函数（created、mounted、updated、unmounted）
一起学习
10-24 2561
本文主要介绍Vue3中自定义指令和钩子函数的使用方法和它们之间的关系。
【vue3系列】vue3之生命周期(带图)
qq_42445025的博客
12-16 5万+
Vue3之生命周期 主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)： 创建 ---- 在组建创建时执行 挂载 ---- DOM被挂载时执行 更新 ---- 当响应数据被修改时执行 销毁 ---- 在元素被销毁之前立即执行 在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。 在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。 import {onMounted
vue生命周期3 更新流程 beforeUpdate updated
MCCLS的博客
07-18 2414
更新流程： 1.beforeUpdate 点击按钮使n改变发现进行了beforeUpdate进行了调用 验证：数据是新的,页面还是旧的 发现n为2,但是页面还为1 所以在beforeUpdate中页面和数据尚未进行同步 2. 即再次进行数据到模型的过程 其实在挂载的时候已经走过一遍了,那时候为初次渲染 更新则为再次渲染 3.updated 验证： 发现数据是新的,页面也是新的 ...
教程10 Vue3的生命周期与方法（Typescript）+ Setup语法糖详解 + setup中的生命周期钩子
boxuestudio的博客
09-25 3978
教程10 Vue3的生命周期与方法（Typescript）+ Setup语法糖详解 + setup中的生命周期钩子
vue3.0生命周期的示例代码
10-14
主要介绍了vue3.0生命周期的相关知识，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
Vue2生命周期图解（详细）
03-31
Vue2生命周期图解（详细）
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
【Vue】created、mounted、updated详解
热门推荐
慕白Lee的博客
10-16 6万+
对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了（关于这一点，在笔者测试中，在mounted方法中打断点然后run，依旧能够在浏览器中看到整体的页面）。通过浏览器的渲染过程，可以总结出created和mounted的使用场景。
vue3 原理和更新梳理
Eternity_matt的博客
11-11 1124
更新方向 1. 框架核心 Vue2 是响应式原理基于 Object.defineProperty 方法重定义对象的 getter 与 setter，vue3 则基于 Proxy 代理对象，拦截对象属性的访问与赋值过程。差异在于，前者并不能对诸如数组长度变化、增删元素操作、对象新增属性进行感知，在 vue 层面不得不重写一些数组方法（push、pop、unshift、shift 等），动态添加响应式属性，也要使用 $set方法等。 而 Proxy 则完美地从根上解决了这些问题，不过对于不支持 Proxy 对象
vue3组件更新流程
twinkle的博客
06-01 921
先写一个组件，, 然后咋们来执行更新的流程 mount update 还记得组件挂载阶段中的 么？ 在这里的时候会进行依赖收集，会在实例instance上挂载一个方法 当数据发送变化的时候，就会触发 函数， 不清楚响应式系统的可以查看这里整体的流程图如下：咋们来分析下 vue3 中属性变化的情况 对于这种情况，咋们怎么才能找出属性的变化，是不是就是应该遍历 如果里面的 在 中不存在，则标记为新增的属性 代码应该这么写： 第二种情况 属性减少 对于这种情况，咋们要找出属性的变化，直接遍历 oldPro
Vue3中的自定义指令（defineDirective）和钩子函数（created、mounted、updated
2401_84435768的博客
04-27 703
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记。
Vue3组件同步更新 update 方法 和Vue2.sync的用法
m0_59993469的博客
12-13 7985
有一篇文章我用到了这个update来向父组组件传参 那么这个是干啥的 ，其实通俗易懂一点 他就是用来同步更新父组件的值 不需要再用父组件来调用自定义事件 实例： vue3版本 <template> <div class=""> <p @click="open">请你点击</p> <zh-drag v-model:show="show" title="头部"> <template #center> 中
第三篇、vue组件生命周期 beforeUpdate()和updated()
qq_59474517的博客
07-06 1609
vue生命周期第三章，生命周期 beforeUpdate()和updated()
vue3 第三幕之【生命周期函数】(挂载篇+更新篇+卸载篇)
XSL_HR的博客
09-22 4654
关于vue3生命周期挂载 更新 卸载过程的详细分析总结
vue 钩子函数updated什么时候触发
qq_40603125的博客
05-08 735
updated是Vue生命周期钩子函数之一，在组件的数据变化导致虚拟DOM重新渲染并应用到实际DOM之后触发。具体来说，updated会在以下几种情况下被触发：初始渲染完成后：当组件首次渲染完成并将虚拟DOM渲染到实际DOM之后，updated钩子函数会被调用。响应式数据变化时：当组件中的响应式数据发生变化时，虚拟DOM会重新渲染并应用到实际DOM，此时updated钩子函数会被调用。需要注意的是，updated在虚拟DOM重新渲染后立即触发，此时实际DOM可能还没有更新完成。
vue3.0生命周期
08-19
在 Vue 3.0 中，生命周期钩子函数有所改变。下面是 Vue 3.0 中的新生命周期函数： - `setup`: 这是一个新的组合API，用来替代 Vue 2.x 中的 `beforeCreate` 和 `created` 钩子函数。在 `setup` 函数中，你可以通过返回一个对象或函数来提供组件的响应式数据、计算属性、方法等。 - `beforeMount`: 在挂载之前调用，替代了 Vue 2.x 中的 `beforeMount` 钩子函数。 - `onMounted`: 在组件挂载到 DOM 后调用，替代了 Vue 2.x 中的 `mounted` 钩子函数。 - `beforeUpdate`: 在更新之前调用，替代了 Vue 2.x 中的 `beforeUpdate` 钩子函数。 - `onUpdated`: 在更新完成后调用，替代了 Vue 2.x 中的 `updated` 钩子函数。 - `beforeUnmount`: 在卸载之前调用，替代了 Vue 2.x 中的 `beforeDestroy` 钩子函数。 - `onUnmounted`: 在组件卸载后调用，替代了 Vue 2.x 中的 `destroyed` 钩子函数。 - `onErrorCaptured`: 当捕获到一个来自子孙组件的错误时被调用，替代了 Vue 2.x 中的 `errorCaptured` 钩子函数。 这些生命周期函数与 Vue 2.x 中的钩子函数有些不同，更加灵活和易于使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值