0

0

vue3生命周期函数更改了几个

PHPz

PHPz

发布时间:2023-05-12 15:37:12

|

3309人浏览过

|

来源于亿速云

转载

vue3改了4个生命周期函数。Vue3组合式api取消了beforeCreated和created钩子函数,采用steup钩子代替,且里面不能使用this。Vue3里面的组件销毁的钩子函数由destroyed和beforeDestroy换成了beforeUnmount和unmounted。

Vue实例有一个完整的生命周期,也就是从new Vue()、初始化事件(.once事 件)和生命周期、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的生命周期。

vue应用程序中有4个主要事件(8个钩子):

创建 ---- 在组建创建时执行
挂载 ---- DOM被挂载时执行
更新 ---- 当响应数据被修改时执行
销毁 ----在元素被销毁之前立即执行

Vue2的生命周期

立即学习前端免费学习笔记(深入)”;

vue3生命周期函数更改了几个

(1) beforeCreate(创建前)

数据监测(getter和setter)和初始化事件还未开始,此时 data 的响应式追踪、
event/watcher 都还没有被设置

不能访问到data、computed、watch、methods上的方法和数据。

(2)created(创建后)

创建完成后会自动执行函数

(3) beforeMount(挂载前)

在挂载开始之前被调用,相关的render函数首次被调用。

这次Vue开始解析模板,生成虚拟DOM存在内存中,还没有把虚拟DOM转换成真实DOM,插入页面中

(4)mounted(挂载后)

在el被新创建的 vm.$el(就是真实DOM的拷贝)替换,并挂载到实例上去之后调用(将内存中的虚拟DOM转为真实DOM,真实DOM插入页面)。

一般在这个阶段进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等等

(5)beforeUpdate(更新前)

响应式数据更新时调用,此时虽然响应式数据更新,但是对应的真实 DOM 

还没有被渲染(数据是新的,但页面是旧的,页面和数据没保持同步呢)。

(6)updated(更新后)

由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。

调用时,组件 DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环

(7)beforeDestroy(销毁前)

iOS开发学习之iOS多线程和RunLoop 中文WORD版
iOS开发学习之iOS多线程和RunLoop 中文WORD版

iOS多线程编程对于iOS开发初学者来说,总是会觉得很难理解和掌握,现在通过几个实例来更加系统全面的理解iOS多线程编程,希望对大家有所帮助。 有些程序是一条直线,起点到终点;有些程序是一个圆,不断循环,直到将它切断。直线的如简单的Hello World,运行打印完,它的生命周期便结束了,像昙花一现那样;圆如操作系统,一直运行直到你关机。 一个运行着的程序就是一个进程或者叫做一个任务,一个进程至少包含一个线程,线程就是程序的执行流。Mac和iOS中的程序启动,创建好一个进程的同时,一个线程便开始运行,

下载

实例销毁之前调用

在这个阶段一般进行关闭定时器,取消订阅消息,解绑自定义事件。

(8)destroyed(销毁后)

实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。


	
		
		分析生命周期
		
		
	
	
		
		

当前的n值是:{{n}}

常用的生命周期钩子:
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例:
(1)销毁后借助Vue开发者工具看不到任何信息。
(2)销毁后自定义事件会失效,但原生DOM事件依然有效。
(3)一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。

Vue3的生命周期

vue3生命周期函数更改了几个

(1) onBeforeMount

在挂载之前被调用,渲染函数render首次被调用

(2) onMounted

组件挂载时调用

(3) onBeforeUpdate

数据更新时调用,发生在虚拟DOM打补丁之前。

(4) onUpdated

因数据更改导致的虚拟DOM重新渲染和打补丁时调用

(5) onBeforeUnmount

在卸载组件实例之前调用,此阶段的实例依旧是正常的。

(6) onUnmounted

卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。


vue2与vue3在生命周期的区别

vue2 vue3
beforeCreate setup() 开始创建组件之前,创建的是data和method
created setup()
beforeMount onBeforeMount 组件挂载到节点上之前执行的函数。
mounted onMounted 组件挂载完成后执行的函数
beforeUpdate onBeforeUpdate 组件更新之前执行的函数。
updated onUpdated 组件更新完成之后执行的函数。
beforeDestroy onBeforeUnmount 组件挂载到节点上之前执行的函数。
destroyed onUnmounted 组件卸载之前执行的函数。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

153

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

159

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

110

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

228

2024.09.24

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

3022

2024.08.14

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

44

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

89

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

25

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

36

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

Vue3.x 核心篇--十天技能课堂
Vue3.x 核心篇--十天技能课堂

共30课时 | 1.5万人学习

Vue3.x新特性篇--十天基础课堂
Vue3.x新特性篇--十天基础课堂

共20课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号