位置: 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)

  • 免抵退和免退税 区别 委托
  • 月末存款余额
  • 处置公司车辆账务处理
  • 其他收益里的政府补助免税吗
  • 连续亏损3年
  • 手工发票有没有期限
  • 全资子公司合并报表是权益法还是成本法
  • 预收购货单位货款
  • 接受捐赠收入会计利润含税吗
  • 公司土地转让另外公司
  • 免费送客户礼品的文案
  • 代发工资开票内容
  • 收到对方开的发票怎么做账
  • 股东垫付工资如何做账
  • 股票印花税怎么交
  • 其他服务业经营范围包括哪些
  • 旅游企业小规模纳税人差额征收
  • 直接融资租赁模式
  • 机械租赁有什么机械
  • 土地增值税进项税
  • 怎么知道一个公众号有多少人关注
  • 计算内含报酬率所使用的年金现值系数
  • 收据怎么写比较规范
  • 应收账款保理会计处理 会计视野
  • Linux系统中quota磁盘命令的相关使用解析
  • 固态硬盘什么牌子性价比高
  • 应收账款包括哪些
  • 预售商品房转让合同
  • 现金折扣优惠
  • 前端发起请求怎么设置
  • 三维重建的主要步骤
  • 深入vue3+typescript技术栈
  • php面试知识点
  • 交所得税怎么记账
  • 下乡扶贫有补助吗
  • 工程产值是怎么算的
  • 框架合同的印花税
  • 汇算清缴调增都有哪些项目
  • 机器设备计提折旧纳税调整
  • SQL2005 provider: 命名管道提供程序 error: 40 无法打开到 SQL Server 的连接
  • 厂房房租发票
  • 实收资本是什么科目
  • 民办非盈利组织注销了在哪登报
  • 折旧后的剩余价值叫什么
  • 小规模免税如何开票
  • 电商账务怎么做
  • 企业为什么要转移用工风险什么意思
  • 费用减少利润减少的情况
  • 个人银行存款要手续费吗
  • 什么是利润表?其作用有哪些?
  • 享受研发费用加计扣除需要什么条件
  • 企业年度报告中的什么信息由企业选择是否向社会公示
  • 年初速动比率怎么算
  • mysql常见语句总结
  • sqlserver批处理
  • xp系统为什么不能用了
  • windowsxp
  • mac地图怎么标记多个位置
  • window系统怎么截屏屏幕
  • win8系统无法开机出现字母
  • macbookpro4399小游戏
  • win7资源管理器怎么打开
  • windows关机音乐
  • windows7禁止开机启动
  • 升级win10系统后安装谷歌打不开
  • Linux如何使用命令
  • c++全局变量赋值
  • nodejs模拟浏览器环境
  • 批处理在windows中的典型应用
  • k mean python
  • nodejs python交互
  • unity的vs
  • 老生常谈的近义词
  • 用javascript
  • jquery实现全选
  • javascript的dom操作
  • jquery操作元素样式
  • 深入JavaScript高级语法
  • 上海长宁区多大面积
  • 山东省税务局地税苑宿舍是谁开发的?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设