vue生命周期(Life Cycle)函数详解
生命周期函数
在 某一时刻 自动执行 的函数
生命周期是什么
生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作。
生命周期有哪些
Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期,今天我们主要讲常使用的八个钩子函数
生命周期整体流程
接下来我们从以下三个阶段进行解读生命周期:
1.创建阶段
2.运行阶段
3.销毁阶段
1.创建阶段:
创建Vue的实例对象,初始化。这时候该对象只有默认的一些周期函数和默认事件,其他东西还未创建。
实例初始化阶段主要有两个函数:
- beforeCreate()
- created()
beforeCreate()
这里我们试着打印data中定义的message和执行handleItemClick方法。打开页面并查看控制台。
这里报错了,this.handleItemClick is not a function,也就是不可使用,在beforeCreate 生命周期函数执行的时候,data和methods中的数据都没有初始化
created()
接着我们执行遇到的第二个钩子函数created()。
同样,我们去查看页面和控制台。
在打印结果中,可以看到在created中,data和methods都已经被初始化好了。
如果要调用methods中的方法,或者操作data中的数据,最早只能在created中操作。
开始编译模板
接下来我们进到生命周期函数中的开始编译模板:
这里表示Vue开始编译模板,
把vue代码中的那些指令进行执行,最终在内存中生成个编译好的最终模板字符串然后把这个模板字符串,渲染成为内存中的DOM,此时,只是在内存中,渲染好了模板,并没有把模板挂载到真正的页面中去。
挂载模板:
经过开始编译模板之后就进入了挂载模板,挂载阶段也分beforeMount和mounted两个钩子函数。
beforeMount()
是遇到的第三个生命周期函数,表示模板已经在内存中编译完成了
但是在尚未把模板渲染到页面中去,我们结合代码看,
这时候虽然在页面中可以显示 “hello world” 字符了,但是在控制台中依然是{{message}}
也就是说,在beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。
mounted()
这是遇到的第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。
这时候在页面中可以显示 “hello world” 字符了,而且在控制台中也渲染为 “hello world” 字符串了
注意:mounted 是实例创建期间的最后一个生命周期函数,当执行完mounted 就表示 实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例,就静静的躺在我们的内存中,一动不动。
我们的创建阶段的生命周期函数已经完成了,也就是图中的圆形部分。
2.运行阶段
接下来进入就是运行阶段,也就是下图部分:
运行阶段主要是两个钩子函数:
- beforeUpdate()
- updated()
首先我们先看运行阶段中这两个事件
①When data changes,意思是当data数据发生改变时
②beforeUpdate()该钩子函数会根据data数据的改变有选择性的触发0至多次
beforeUpdate()
为了更好的看到数据的改变,我们给message数据进行监听,设置一个按钮,点击按钮时改变数据,将事先设好的“hello world”改为“No”.
点击修改message
出结论:
当执行beforeUpdate的时候,页面中显示的数据还是旧的,
此时data数据是最新的,页面尚未和最新的数据保持同步
updated()
同样,我们在updated()钩子函数中执行上一步的操作
看看打印结果:
点击按钮后
这时候我们可以看到界面上元素的内容和data中message的数据都是No
也就是说updated事件执行的时候,页面和data数据已经保持同步了,都是最新的。
经过上面两个钩子函数的操作,运行阶段的生命周期函数完成了:
最后就会进入到销毁阶段的生命周期函数:
同样的他们也有两个钩子函数:
- beforeDestory()
- destoryed()
销毁阶段的钩子函数我们了解就好了。
beforeDestroy()
当执行beforeDestoy钩子函数的时候,Vue已经从运行阶段进入到了销毁阶段;
当执行beforeDestory的时候,实则身上所有的data和所有的methods,以及过滤器、指令等,都处于可用状态,此时还没有真正执行销毁的过程。
destroyed()
当执行到destoryed函数的时候,组件已经完全销毁了,此时,组件中所有的data、methods、指令、过滤器等,都已经不可用了。
完全销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器
并不能清除DOM,仅仅销毁实例。
经过代码的辅助理解,我们再回头看看整个图的过程,应该会更加清晰了吧。
Vue生命周期函数理解并不难,也是和代码一样至上而下执行,一步步执行。
表格总结
vue生命周期(Life Cycle)函数详解相关推荐
- Android复习10【Service与Thread的区别、Service的生命周期、Service生命周期解析(相关方法详解、启动方式的不同、绑定)、音乐播放器+服务】
音乐播放器Android代码下载:https://wws.lanzous.com/ifqzihaxvij 目 录 Service与Thread的区别 Service的生命周期 Service生命周 ...
- Spring生命周期Bean初始化过程详解
Spring生命周期Bean初始化过程详解 Spring 容器初始化 Spring Bean初始化 BeanFactory和FactoryBean 源码分析 Bean的实例化 preInstantia ...
- vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解 前言 js钩子函数运行时间 js钩子函数的过渡或动画 总结 结语 前言 转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
- Vue生命周期及其钩子函数
vue的生命周期.生命周期函数,又叫钩子函数 生命周期钩子===生命周期函数===生命周期事件 目录 一.Vue生命周期 1.vue实例从创建到销毁的过程 2.vue生命周期有4个阶段 3.父子 ...
- 初探 Vue 生命周期和钩子函数
生命周期 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数. 简单来说就是好像把人的出生到死亡分成一个个阶段,你取名字肯定是在你出生阶段,而不是在成年阶段:你结婚肯定是在成年阶段,而不是在 ...
- Vue生命周期和钩子函数的一些理解
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
- Vue生命周期中钩子函数理解简记
Vue生命周期钩子函数 钩子函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroy ...
- Java—线程的生命周期及线程控制方法详解
关注微信公众号:CodingTechWork,一起学习进步. 线程生命周期5种状态 介绍 线程的生命周期经过新建(New).就绪(Runnable).运行(Running).阻塞(Bolocked ...
- @kubernetes(k8s)的kubectl的使用及资源类型pod生命周期与资源清单详解
文章目录 kubernetes 一.kubernetes kubectl的使用 1.kubectl 的概述: 2.kubectl的使用 2.kubectl可操作的资源对象类型 3.kubectl子命令 ...
- django models索引_Django(生命周期、每部分详解、路由层)
https://www.zhihu.com/video/1248736141978927104 每日测验 """ 今日考题 1.什么是静态文件,django静态文件配置如 ...
最新文章
- linux python虚拟环境 相关的
- 《预训练周刊》第35期:零样本规划器的语言模型:为智能体提取可操作的知识、LaMDA:对话应用的语言模型...
- Mysql 中根据条件排序获取排名
- 使用模板来解决接口继承问题
- 华为Mate 50系列明年初发布:麒麟990/骁龙8 Gen1加持
- Python自然语言处理学习笔记(41):5.2 标注语料库
- 机器学习之监督学习(五)——集成学习(Boosting)
- 21. Function 对象
- c++ 11 中for循环新增的用法(基于范围的for循环)
- 一个多道批处理系统中仅有 P1 和 P2 两个作业
- GRE常见的熟词生义
- 问题 D: 寻找丢失的LZY
- 将电脑文件夹内的文件名批量导入到Excel表格中
- 零基础实现摄像头的全平台直播 (一)内网直播的实现
- 和Windows10的垃圾“照片”说再见,找回“Windows照片查看器”
- 写在2014年的感恩节
- C++ 中的:“引用” 和“取地址符”的区别和作用
- Application Server was not connected before run configuration stop, reason: javax.management.Instanc
- 树的前序,中序,后序遍历。
- 【项目管理】项目进度管理
热门文章
- 办公电脑开不了机该怎么办?旧时光 oldtimeblog
- access2007 定义了过多字段_Access数据库中“ 查询过于复杂”问题的一些解决方案...
- 用爬虫分析沪深300指数超长走势
- Winform右键菜单contextMenuStrip控件的使用
- 笔记本电脑u盘装linux系统,笔记本电脑安装linux桌面版
- 微信客服接口php,企业客服接口说明
- Java之单元测试和安全规范
- 进程(程序)僵死问题解决方法
- linux查看磁盘条带,Linux_LVM_详解_03 线性和条带
- Postman报:400 Bad Request