vue 生命周期_Vue生命周期小白看了都会的

9c8d8905ea54ae0a4029b2149a194480.gif

最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容。

一、钩子函数

在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁出现,也相信给很多初学者带来了困扰。那到底什么是钩子函数呢?

按我个人的理解,钩子函数就是一个函数,他最大的特点就是在生命周期执行流程中去执行的。钩子函数钩子函数,就是挂载一些东西的,我们把需要实现的一些功能代码写在对应的钩子函数中,当生命周期在执行的时候,就能执行我们挂载的代码。

钩子函数的实现,基本原理就是callback,回调函数。

二、vue生命周期图示(注释)

原图是从vuejs官方文档上拷下来的,自己用ps写了一点注释。

cc5e30d4e450cba86a5d943fbbc6dced.png

三、vue生命周期详细解析

1. 实例化vue(组件)对象:new Vue()

2. 初始化事件和生命周期 init events 和 init lifecycle

3. beforeCreate函数:

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

即此时vue(组件)对象被创建了,但是vue对象的属性还没有绑定,如data属性,computed属性还没有绑定,即没有值。此时还没有数据和真实DOM。属性还没有赋值,也没有动态创建template属性对应的HTML元素(二阶段的createUI函数还没有执行)

4. 挂载数据(属性赋值)

包括 属性和computed的运算,通过依赖注入导入依赖

5. Created函数:

此时 vue对象的属性有值了 ,但是DOM还没有生成,$el属性还不存在。

此时有数据了,但是还没有真实的DOM

即:data,computed都执行了。属性已经赋值,但没有动态创建template属性对应的HTML元素,所以,此时如果更改数据不会触发updated函数

如果:数据的初始值就来自于后端,可以发送ajax,或者fetch请求获取数据,但是,此时不会触发updated函数

6. 检查

1)检查是否有el属性

检查vue配置,即new Vue{}里面的el项是否存在,有就继续检查template项。没有则等到手动绑定调用vm.$mount()

完成了全局变量$el的绑定。

2)检查是否有template属性

检查配置中的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML(即整个#app DOM对象,包括< div id=”app” >和< /div>标签)都作为被填充对象替换掉填充区域

即:如果vue对象中有 template属性,那么,template后面的HTML会替换$el对应的内容。如果有render属性(渲染),那么render就会替换template。

即:优先关系时:render > template > el

7. beforeMount函数:

模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数

此时 this.$el有值,但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换

8. 模板编译:用vue对象的数据(属性)替换模板中的内容

9. Mounted函数:

模板编译完成,数据挂载完毕

即:此时已经把 数据挂载到了页面上 ,所以,页面上能够看到正确的数据了。

一般来说,我们在此处发送 异步请求 (ajax,fetch,axios等),获取服务器上的数据,显示在DOM里。

10. beforeUpdate函数:

组件更新之前执行的函数,只有数据更新后,才能调用(触发)beforeUpdate,注意:此数据一定是在模板上出现的数据,否则,不会,也没有必要触发组件更新(因为数据不出现在模板里,就没有必要再次渲染)

数据更新了,但是,vue(组件)对象对应的dom中的内部(innerHTML)没有变,所以叫作组件更新前。(数据更了,模板没更新)

11. updated函数:

组件更新之后执行的函数

vue(组件)对象对应的dom中的内部(innerHTML)改变了,所以,叫作组件更新之后

12. beforeDestroy:vue(组件)对象销毁之前

13. destroyed:vue组件销毁后

最后

可以关注下公众号进交流群,大家一起学习讨论!

如果本文对您的有帮助的话可以点赞评论收藏下转发到您的朋友圈!编辑不易非常感谢!

85a3d3914548059a00ba23489fb0033b.gif

7ef343824115fa414f63be1ffd5c8b70.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/426998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac/Ubuntu 上编译、搭建 WebRtc/licode 服务器

1.下代码 git clone https://github.com/ging/licode.git cd licode 2.安装依赖 2.1 配置ubuntu开发环境&#xff1a; 2.1.1 安装C/C开发环境 1. sudo apt-get -y install build-essential //安装主要编译工具 gcc, g, make 2. sudo apt-get -y install autoconf automake1.9 3…

实例7:python

#将一个列表的数据复制到另一个列表中。 #程序分析&#xff1a;使用列表[:]。 #程序源代码&#xff1a; #!/usr/bin/python -- coding: UTF-8 -- #a [1, 2, 3] #b a[:] #print (b) #import copy #a [1, 2, 3] #bcopy.copy(a) #print(b) #[1, 2, 3] #使用 Python3 的参…

Python3 字典 copy()方法

描述 Python 字典 copy() 函数返回一个字典的浅复制。 语法 copy()方法语法&#xff1a; dict.copy() 参数 • NA。 返回值 返回一个字典的浅复制。 实例 以下实例展示了 copy()函数的使用方法&#xff1a; 实例 #!/usr/bin/python3 dict1 {‘Name’: ‘Runoob’, ‘Age’: 7,…

php为什么搜不到字段,php-通过多个字段搜索.有时一个领域,有时不止一个领域

我有搜索表.在这里多个领域.有时我将使用一个字段提交表单,有时将使用两个字段提交表单,有时使用多个字段值.if (isset($_POST[search])) {$projectName $_POST[pName];$clientId $_POST[s_by_clientName];$departmentId $_POST[s_by_department];$statusName $_POST[s_by_…

python语言key_Python语言学习:字典常用的方法

1. 增加&#xff1a;字典[key]value(不存在的key和value)info{stu1101:TengLan,stu1102:LuoZe,stu1103:XiaoZe}info[stu1104]crystalprint(info) #输出结果&#xff1a;{stu1101: TengLan, stu1102: LuoZe, stu1103: XiaoZe, stu1104: crystal}2. 修改&#xff1a;字典[key]val…

python 运算及注释

""" 上面的两行代码&#xff0c;在2.0的python中&#xff0c;若想执行含有汉字的代码&#xff0c;是必不可少的&#xff0c;且两行代码必写在单个py文件最上方&#xff0c;之间不可有任何字节。且该两行代码&#xff0c;可在pycharm,设置中&#xff0c;直接设置…

实例8:python

#输出 9*9 乘法口诀表。 #!/usr/bin/python -- coding: UTF-8 -- #for i in range(1, 10): print for j in range(1, i1): print ("%d*%d%d" % (i, j, i*j),) #!/usr/bin/python3 i0 j0 while i<9: i1 while j<9: j1 print(j,“x”,i,"",i*j,…

php gd gif动画,我可以检测使用PHP和GD的animationGIF?

在imagecreatefromgif()函数的PHP手册页中有一个简短的代码片段&#xff0c;应该是你所需要的&#xff1a;由ZeBadger提供的图片评论&#xff03;59787在search同样问题的解决scheme时&#xff0c;我注意到php.net网站对Davide和Kris所指代码的后续操作&#xff0c;但根据作者的…

ant man 什么意思_浅谈为什么很多蓝牙模块厂家选择nRF52832?

浅谈为什么很多蓝牙模块厂家选择nRF52832&#xff1f;现在蓝牙低功耗(BLE)SOC作为新一代蓝牙&#xff0c;以其低功耗的优势&#xff0c;正凸显出强大的市场竞争力&#xff0c;而其中Nordic公司的nRF52832这一款低功耗蓝牙芯片更是受到大家的欢迎。Nordic是一家无晶圆厂半导体公…

实例9:python

#题目&#xff1a;暂停一秒输出。 #程序分析&#xff1a;使用 time 模块的 sleep() 函数 #!/usr/bin/python -- coding: UTF-8 -- import time l[1,2,3,4] for i in range(len(l)): print (l[i]) time.sleep(5) # 暂停一秒输出

php对话框制作,织梦系统“提示窗口对话框类”详解,oxwindow.class.php、catalog_do.php...

如果对织梦系统做过二次开发或学深入研究过的话&#xff0c;一定会知道在我们做织梦二次开发时&#xff0c;一般会把php文件以及对应的模板文件起的名字&#xff0c;除了扩展名外&#xff0c;其它都一样&#xff0c;这是织梦文件起名的一个特点。例如&#xff0c;index_body.ph…

B-JUI文档、下载

概述 特别说明 本文档仅适用于最新版的B-JUI&#xff0c;网站首页或下载页可以查看B-JUI的最后更新时间。 B-JUI前端管理框架适用于快速开发各类WEB管理系统&#xff0c;可与任意后端程序&#xff08;java、php、.net...&#xff09;配合使用。 B-JUI基于Bootstrap样式及jQuery…

Python time sleep()方法

描述 Python time sleep() 函数推迟调用线程的运行&#xff0c;可通过参数secs指秒数&#xff0c;表示进程挂起的时间。 语法 sleep()方法语法&#xff1a; time.sleep(t) 参数 • t – 推迟执行的秒数。 返回值 该函数没有返回值。 实例 以下实例展示了 sleep() 函数的使用方法…

vba xml 怎么设置父节点_熊二做了一个xml报文处理的开源库easyxml

❝自信、冷静、专注。—— TM 熊的自我勉励❞1. 前言熊二从去年开始&#xff0c;因项目需求接触到xml报文的处理&#xff0c;也是我第一次学习用C/C的方式处理基于DOM模型的xml报文。因为本人比较懒hhh&#xff0c;所以第一反应就是去看看网上有没有什么大家都在用的比较好的xm…

Linux以oracle用户登录,Linux_oracle 10G for linux常用命令,首先以Oracle用户登录1、 - phpStudy...

oracle 10G for linux常用命令首先以Oracle用户登录1、 $/oracle/oracle/app/product/101/bin/dbstart&#xff1a;启动数据库。2、 $/oracle/oracle/app/product/101/bin/dbshut&#xff1a;关闭数据库。3、 $/oracle/oracle/app/product/101/bin/dbca&#xff1a;数据库配置助…

实例10:python

#题目&#xff1a;暂停一秒输出&#xff0c;并格式化当前时间。 #!/usr/bin/python -- coding: UTF-8 -- import time print (time.strftime(’%Y-%m-%d %H:%M:%S’,time.localtime(time.time()))) 暂停一秒 time.sleep(1) print (time.strftime(’%Y-%m-%d %H:%M:%S’,…

axios、ajax和xhr前端发送测试

其实axios和ajax都对原生的xhr进行了封装&#xff0c;个人感觉还是axios简洁、方便&#xff0c;尤大大都让我们转axios了&#xff0c;确实对于ajax好了不少&#xff0c;它支持了promise对象&#xff0c;支持js最新的规范。简单易用。 <!DOCTYPE html> <html lang"…

Python time strftime()方法

描述 Python time strftime() 函数接收以时间元组&#xff0c;并返回以可读字符串表示的当地时间&#xff0c;格式由参数format决定。 语法 strftime()方法语法&#xff1a; time.strftime(format[, t]) 参数 • format – 格式字符串。 • t – 可选的参数t是一个struct_time对…

iview 可以选择当天 禁用_人脸识别刚要普及,怎么就被禁用了?|人脸识别|人脸信息|世超|rekognition...

点击播放 GIF 0.5M人脸识别大家都不陌生了&#xff0c;从 iPhone 上面的 Face ID 再到支付宝刷脸支付&#xff0c;这个曾经只有在科幻电影上面才能见到的技术逐渐变得越来越司空见惯。点击播放 GIF 0.4M按理来讲&#xff0c;一项方便的技术应该越来越普及才对&#xff0c;不过世…

oracle ytd,hana ytd计算

YTD解答方案要求&#xff1a;输出字段: 年月, YTD金额因为我这边只有system一个账号&#xff0c;就用system账号写合同表的结构和数据如下:create column table "SYSTEM"."CONTRACTS"("CONTRACT_ID" INTEGER null, --合同ID"START_DATE&qu…