位置: IT常识 - 正文

Vue生命周期钩子剖析(共12个钩子)(vue生命周期钩子函数)

编辑:rootadmin
Vue生命周期钩子剖析(共12个钩子)

推荐整理分享Vue生命周期钩子剖析(共12个钩子)(vue生命周期钩子函数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue生命周期钩子函数各阶段特点及可以用来作什么?,vue生命周期钩子详解,vue生命周期钩子函数,vue生命周期钩子函数各阶段特点及可以用来作什么?,vue生命周期钩子函数执行顺序,vue生命周期钩子函数有哪些?,vue生命周期钩子函数各阶段特点及可以用来作什么?,vue生命周期钩子函数,内容如对您有帮助,希望把文章链接给更多的朋友!

生命周期示意图:

 生命周期及其钩子函数理解

生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子函数:

生命周期钩子函数,让够让咱们在初始化实例时,添加自己的代码; 生命周期的钩子函数中的this,会默认指向vue的实例;

钩子函数汇总:

beforeCreate:是第一个生命周期函数,表示实例完全被创建出来之前会执行这个函数。在此函数执行时,data和methods中的属性与方法定义都还没有初始化。created:是第一个生命周期函数,在此函数中,data 和 methods 都已经被初始化好了。beforeMount:是第三个生命周期函数,表示模板已经在内存中编辑完成了,但是还没有被渲染到页面中。mounted:第四个生命周期函数,此时内存中的模板已经挂载到了页面中,用户可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数,当此函数执行完毕,表示实例已经被完全创建好了。beforeUpdate:此时界面还没有被更新。updated:updated 事件执行的时候,页面和 data 数据已经保持同步。beforeDestroy:销毁之前执行,当beforeDestroy函数执行时,表示vue实例已从运行阶段进入销毁阶段,vue实例身上所有的方法与数据都处于可用状态。destroyed:当destroy函数执行时,组件中所有的方法与数据已经被完全销毁。

其余三个钩子:

keep-alive 缓存组件 生命周期的钩子函数 activated deactivated 生命周期的钩子函数activated(:当缓存组件有被显示出来时,会触发这个钩子函数deactivated:  当缓存的组件隐藏时,会触发这个钩子函数;

errorCaptured :当子孙组件出错时,会调用这个钩子函数

还有一个隐藏的钩子,经常会用到,但注意,这个钩子不是已函数形式写在script中,而是vm实例自带的一个方法,所以在vc(VueComponent)实例上也能访问:

this.$nextTick():在下次 DOM 更新循环结束之后执行延迟回调;在修改数据之后立即使用这个方法,获取更新后的 DOM。

生命周期钩子详解及注意事项 beforeCreate()

生命周期函数被执行此时不能访问data和menthods等中的东西

created()

生命周期钩子函数被执行,实例创建此时能访问data和menthods等中的东西 接下来开始编译模板:开始分析

 template选项检查: 有:编译template返回render渲染函数 无:编译el选项对应标签作为template(要渲染的模板)vue工程项目不支持 虚拟DOM挂载成真实DOM之前:

beforeMount()Vue生命周期钩子剖析(共12个钩子)(vue生命周期钩子函数)

beforeMount :生命周期钩子函数被执行 Create vm$el and replace "el" with it:把虚拟DOM和渲染的数据一并挂到真实DOM上 挂载完毕,mounted:生命周期钩子函数被执行

mounted()

需要注意的问题,避免做项目时踩坑

在这发起后端请求,拿回数据,配合路由钩子做一些事情

详细:

el被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内 该钩子在服务器端渲染期间不被调用。

注意: 如果在此钩子中向后台发送请求,无法立刻拿到数据,如有需要,可在watch中监听该数据调用this.$nextTick()获取更新后的数据

示例:

<template> <div class="swiper-container" ref="cur"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id"> <img :src="carousel.imgUrl" /> </div> </div> </div></template><script>import Swiper from "swiper";export default { props: ["list"], watch: { list: { immediate: true, handler() { if (this.list.length === 0) return this.$nextTick(() => { var mySwiper = new Swiper(this.$refs.cur, { loop: true, // 循环模式选项 // observer: true, autoplay: true, // 如果需要分页器 pagination: { el: ".swiper-pagination", clickable: true, }, // 如果需要前进后退按钮 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // 如果需要滚动条 scrollbar: { el: ".swiper-scrollbar", }, }); }); }, }, },//错误示例mounted(){ var mySwiper = new Swiper(this.$refs.cur, {...}}};</script><style></style>

错误原因:此时获取到的v-for的数据是从后台返回过来的,这需要一定的时间,此时v-for遍历不到任何数据,在数据返回之前页面已经挂载完成,即已开始执行mounted函数,而后台数据成功获取到后再页面重新渲染生成的dom元素,所以在mounted中获取不到该dom元素

beforeUpdate()

当data里数据改变, 更新DOM之前,beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom

虚拟DOM重新渲染, 打补丁到真实DOM

updated – 生命周期钩子函数开始执行,当有data数据改变 – 重复这个循环

updated()beforeDestroy()

当$destroy()被调用:比如组件DOM被移除(例v-if)

beforeDestroy:生命周期钩子函数被执行

拆卸数据监视器、子组件和事件侦听器

实例销毁后, 最后触发一个钩子函数

destroyed: 生命周期钩子函数开始执行

destroyed()activated()

在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等。

activatedcreated触发顺序组件创建最初始created  =>  mounted >activated触发次数只在组件刚创建时创建在使用keep-alive标签中有效,每次进入都会执行钩子中的函数deactivated()

路由组件失活时执行

errorCaptured ()

子孙组件出错时调用,一般不用

this.$nextTick()

当你修改了数据,vue帮你操作完dom ,把真实的dom放入页面,vue再帮你调用$nextTick

本文链接地址:https://www.jiuchutong.com/zhishi/298416.html 转载请保留说明!

上一篇:【机器学习】KNN算法及K值的选取

下一篇:IDEA如何完美配置Servlet(适用于IDEA 2022及以下版本)(idea配置meaven)

  • 电梯的税收筹划怎么做
  • 一般计税方法是全额计税吗
  • 保本理财收益增值税纳税主体
  • 季度预交所得税可以弥补上年度亏损吗
  • 财务预算是做什么的
  • 留存收益筹资的优缺点
  • 固定资产属于净资产的哪一项
  • 房地产行业预缴税款
  • 第三方用人单位应承担哪些责任
  • 代扣代缴的增值税可以作为进项税抵扣吗
  • 做内账有风险还是做外账有风险
  • 投资款需要交印花税嘛
  • 预付卡发票报销单怎么写
  • 停车费属于不动产租赁服务税率
  • 红字发票通知单已经上传可以作废吗
  • 作废发票如何管理
  • 企业收购股权要交税吗
  • 土地补偿款属于专项资金吗
  • 企业债券收入要在所得税前扣除吗
  • 失控发票账务处理
  • 库存商品转结
  • linux aws是什么
  • 什么原因导致血脂高
  • linux路由器配置实例
  • windows 10怎么回事
  • 光纤布线有什么作用
  • 一个药厂能够生产药品的三个前提条件
  • 员工聚餐费用计入
  • PHP:oci_commit()的用法_Oracle函数
  • lsass.exe在哪个文件夹
  • 销售产品取得收入
  • 当财务报表中列报对应数据时
  • 微信小程序分包加载
  • thinkphp 快速入门
  • 多模态特征融合pytorch
  • br命令怎么用
  • php之间传递数据
  • gcm文件
  • 员工离职补偿怎么入账
  • 欠别人钱可以用车抵押吗
  • 固定资产清理的金额怎么算
  • 损益类所得税费用
  • 增值税电子普通发票和专票的区别
  • 虚开增值税发票不是也要缴税吗
  • mongodb时序
  • 帝国cms到底好不好
  • 非正常户是黑名单吗
  • 所得税汇算清缴调整项目
  • 一般纳税人的税负率是多少
  • 支付水费委托收款
  • 总账和成本哪个工资高
  • 非盈利组织企业所得税主表如何填列
  • 影响企业营业利润的有哪些
  • 进口环节增值税额
  • 房地产公司销售土地使用权
  • 企业产品研发
  • 盈利能力分析的理论意义和现实意义
  • 专用发票下载怎么操作
  • 出口退税对应的进项不能抵扣对吗
  • 红字发票开错了已上传如何作废?
  • 固定资产的入账价值包括增值税吗?
  • 残保金补申报需要交滞纳金吗
  • 分公司第二季度总结报告
  • 红字冲销凭证怎么登明细账
  • xp剪贴板怎么打开
  • linux终端怎么运行
  • win10 自带软件
  • windows无法完成配置若要尝试恢复配置
  • 省去911元 教你如何将Win10家庭版改造成专业版
  • gzip: stdin: unexpected end of file tar: Unexpected EOF in archive tar: Unexpect
  • 安卓音游吃音
  • 安卓微信仿ios版
  • gradle 混淆
  • 辽宁省国家税务局电子税务局官网
  • 临沂市有哪些国企央企
  • 广西壮族自治区图书馆
  • 水电费收税
  • 东莞税收突破2000亿
  • 辽宁省电子税务局操作手册
  • 缴纳耕地占用税的好处
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设