0

0

vue生命周期钩子钩子函数的介绍(附示例)

不言

不言

发布时间:2018-11-27 16:09:49

|

3405人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于vue生命周期钩子钩子函数的介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Vue实例的生命周期钩子函数(8个)

1、beforeCreate

  刚 new了一个组件,无法访问到数据和真实的dom,基本上这个好像不能干啥

2、created

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

   data属性完成了赋值,可以对数据进行修改但是不会触发updated,在这里可以做初始数据的获取

3、beforeMount

   render准备要渲染了,函数中虚拟dom已经创建完成,这时候改变数据也不会触发update,在这里可以做初始数据的获取

4、mounted

   开始render,渲染出真实dom,执行mounted钩子函数,组件已经出现在页面中,数据,事件,都DOM都处理好了。这里你 可以改是进行真实的DOM操作

5、beforeUpdate

koolio.ai
koolio.ai

几分钟内把一个概念变成一个完整的播客

下载

   组件,实例数据更新之前会执行的函数,虚拟DOM会重新构建虚拟DOM,与上一次的虚拟DOM对比后重新渲染。切记不可 进行数据修改否则会出现死循环

6、updated

   更新完会执行的函数,切记不可进行数据修改否则会出现死循环

7、beforeDestroy

   实例被销毁之前会执行的函数,做善后的工作,清除计时器,清除非指令绑定的事件等等

8、destroyed

   实例被销毁后会执行的函数,也可以做善后工作。





console这样一个输出顺序:

大概这样一个 生命周期钩子函数执行的顺序,包括我之前是用angular开发跟vue一样 他也有自己的生命周期钩子函数。

生命周期简单来说就是一个组件从创建到初始化到销毁的一个过程,在这个过程中有这些生命周期钩子函数我们可以更方便的去操作整一个组件。


相关专题

更多
DOM是什么意思
DOM是什么意思

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

2679

2024.08.14

ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

82

2025.12.26

压缩文件加密教程汇总
压缩文件加密教程汇总

本专题整合了压缩文件加密教程,阅读专题下面的文章了解更多详细教程。

48

2025.12.26

wifi无ip分配
wifi无ip分配

本专题整合了wifi无ip分配相关教程,阅读专题下面的文章了解更多详细教程。

99

2025.12.26

漫蛙漫画入口网址
漫蛙漫画入口网址

本专题整合了漫蛙入口网址大全,阅读下面的文章领取更多入口。

281

2025.12.26

b站看视频入口合集
b站看视频入口合集

本专题整合了b站哔哩哔哩相关入口合集,阅读下面的文章查看更多入口。

565

2025.12.26

俄罗斯搜索引擎yandex入口汇总
俄罗斯搜索引擎yandex入口汇总

本专题整合了俄罗斯搜索引擎yandex相关入口合集,阅读下面的文章查看更多入口。

676

2025.12.26

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

61

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

28

2025.12.25

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Laravel5.7框架视频教程
Laravel5.7框架视频教程

共21课时 | 3.7万人学习

布尔教育git快速入门视频教程
布尔教育git快速入门视频教程

共10课时 | 3万人学习

后盾网HTML5视频教程
后盾网HTML5视频教程

共38课时 | 8.1万人学习

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

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