0

0

细说VueJS生命周期与钩子函数应用详解

韦小宝

韦小宝

发布时间:2018-03-14 13:31:36

|

2367人浏览过

|

来源于php中文网

原创

本篇文章讲述了VueJS的生命周期和其中钩子函数的应用,大家对VueJS的生命周期和其中钩子函数的应用不了解的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧

朋友你好!很幸运的,我的文章能够被你看到,那么此时你应该想对vuejs的生命周期有更为通俗的理解,以及想知道其中某些钩子函数在实际开发中的应用场景,下面直接看图吧。


1.vue的生命周期

简单的说生命周期就是事物从产生到消失的一个时间过程。那么vue的生命周期就是从其被创建到销毁的过程,其中包含了开始创建、初始化数据、编译模板、挂载dom(渲染) ,渲染->更新->渲染、销毁(卸载)等一系列过程。

那么其中的钩子函数都担负着自己的职责,较为常用的就是created和mounted函数,可以在函数中编写相关的业务逻辑。

Meituan CatPaw
Meituan CatPaw

美团推出的智能AI编程Agent

下载

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

2.钩子函数

beforeCreate

在实例初始化之后,数据观测和事件、生命周期初始化配置之前被调用。

created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测,属性和方法的运算,事件回调。然而,挂载阶段还没开始,$el 属性目前不可见

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用,此时有了虚拟DOM

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子,渲染为真实DOM

beforeUpdate

在数据更新之前时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

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

值得注意的是:该钩子在服务器端渲染期间不被调用

beforeDestroy

实例销毁之前调用。此时,实例仍然是可用的。

destroyed

vue 实例销毁后调用。调用后,vue 实例指示的所有东西都会解绑,所有的事件监听器会被卸载移除,所有的子实例也会被销毁。 

值得注意的是:该钩子在服务器端渲染期间不被调用

相关推荐:

Vuejs搜索匹配功能实例详解

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

237

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

393

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

17

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

103

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

81

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

70

2026.01.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

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

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