位置: IT常识 - 正文

Vue生命周期钩子(vue生命周期钩子函数)

编辑:rootadmin
在页面加载时,主动执行某些程序。 模拟场景:当页面加载完成之后,像是后台加载数据 new Vue()就是初始化一个Vue实例。 Vue实例额生命周期钩子(函数):每个Vue实例在被创建时(new Vue)都要经过一系列的初始化过程 例如:created() 组件初始化完成 mouted() 模板已创 ...

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

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

在页面加载时,主动执行某些程序。

模拟场景:当页面加载完成之后,像是后台加载数据

new Vue()就是初始化一个Vue实例。Vue实例额生命周期钩子(函数):每个Vue实例在被创建时(new Vue)都要经过一系列的初始化过程例如:created() 组件初始化完成mouted() 模板已创建

这是官方文档给出的一个组件从被创建出来到最后被销毁所要经历的一系列过程,所以这个过程也叫做一个组件的生命周期图。从图中我们可以看到,一个组件从被创建到最后被销毁,总共要经历以下8个过程:

Vue生命周期钩子(vue生命周期钩子函数)

1、beforeCreate:组件创建之前2、created:组件创建完毕3、beforeMount:组件挂载之前4、mounted:组件挂载完毕5、beforeUpate:组件更新之前6、upated:组件更新完毕7、beforeDestoy:组件销毁之前8、destoyed:组件销毁完毕

了解了组件生命周期各个过程后,我们放一波代码,真正的看一看一个组件从生到死到底经历了什么。

<body> <div id="app"> <h1>{{ message }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message : "vue组件的生命周期了解一下?= =" }, //组件创建之前 beforeCreate(){ console.group('beforeCreate 组件创建之前状态===============》'); console.log("%c%s", "color:red" , "el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) }, //组件创建完毕 created(){ console.group('created 组件创建完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, // 组件挂载之前 beforeMount(){ console.group('beforeMount 组件挂载之前状态===============》'); console.log("%c%s", "color:red","el : " + (this.$el)); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, // 组件挂载完毕 mounted(){ console.group('mounted 组件挂载完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, // 组件更新之前 beforeUpdate(){ console.group('beforeUpdate 组件更新之前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, // 组件更新完毕 updated(){ console.group('updated 组件更新完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, // 组件销毁之前 beforeDestroy(){ console.group('beforeDestroy 组件销毁之前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, // 组件销毁完毕 destroyed(){ console.group('destroyed 组件销毁完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } }) </script> </body>

运行上面代码,我们在控制台中可以看到:

我们并没有使用任何事件,就触发了这个函数created和mounted是有顺序的,和写的上下顺序无关,都是先执行created在执行mouted

<template> <div id="app"> </div></template><script>export default { mounted() { console.log("这是mounted函数的内容") }, created() { console.log("这是created函数的内容") }}</script><style></style>

有时候我们想操作html的时候,在created中写是获取不到元素的,在mouted可以,初始化数据的话在created里面就可以

如果我们想异步加载数据的话,就可以把获取数据的方法写在生命周期函数中

我们异步来加载水果列表通常页面的数据我们是通过异步和服务器获取的,而不是直接写在data中的,而是应该写在methods中的getData(),将数据放进data中,使用计数器来模拟Ajax的异步获取数据,在created中调用getData()方法

<template> <div id="app"> <h1>水果列表</h1> <ul> <li v-for="(item,index) of fruitList" :key="index"> {{item}} </li> </ul> </div></template><script>export default { data () { return { fruitList:[]//初始状态下,这里不放数据 } }, methods: { getData() { //通过计数器,模拟一个ajax获取数据的方法 setTimeout(()=> { this.fruitList = ["香蕉","苹果","鸭梨"] },2000) } }, //使用created方法来调用getData获取数据 created() { this.getData() }}</script><style></style>

``异步加载演示

这个我们可以来做加载动画,未加载完成显示【loading...】

我们可以使用v-if来实现,通过一个值为loading的布尔变量,当组件创建完毕前,取loading为true,当获取到数据后,去loading为false

<template> <div id="app"> <h1>水果列表</h1>//使用v-if,通过设定好的布尔值来判断是否渲染DOM <p v-if="loading">Loading...</p> <ul v-if="!loading"> <li v-for="(item,index) of fruitList" :key="index"> {{item}} </li> </ul> </div></template><script>export default { data () { return { fruitList:[], loading:true, } }, methods: { getData() { //通过计数器,模拟一个ajax获取数据的方法 setTimeout(()=> { this.fruitList = ["香蕉","苹果","鸭梨"] this.loading = false//获取数据后,使loading取值为false,即加载动画消失 },2000) } }, created() { this.getData() }}</script><style></style>

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

上一篇:织梦dedecms目录权限检测工具(织梦怎么用模板建站)

下一篇:dedecms教程:DedeCMSV5.7中织梦链怎么删除(dedecms安装步骤)

  • 强势微信营销4大步骤(优秀的微信营销案例)

    强势微信营销4大步骤(优秀的微信营销案例)

  • 饿了么可以用支付宝支付吗(饿了么可以用支付宝亲情卡吗)

    饿了么可以用支付宝支付吗(饿了么可以用支付宝亲情卡吗)

  • excel表格下拉数字不递增怎么解决(EXCEL表格下拉数字怎么不递增)

    excel表格下拉数字不递增怎么解决(EXCEL表格下拉数字怎么不递增)

  • 小米手环4和5有什么区别(小米手环4和5有什么区别充电)

    小米手环4和5有什么区别(小米手环4和5有什么区别充电)

  • 微信账户在哪里查看(微信账户在哪里找出来)

    微信账户在哪里查看(微信账户在哪里找出来)

  • 怎么取消抖音APP和火山小视频同步(怎么取消抖音app支付)

    怎么取消抖音APP和火山小视频同步(怎么取消抖音app支付)

  • 如何去掉外层的文件夹(去掉外表的装饰,返回到质朴纯真的状态)

    如何去掉外层的文件夹(去掉外表的装饰,返回到质朴纯真的状态)

  • 微信不能购买虚拟产品是什么意思(微信充值虚拟商品限额)

    微信不能购买虚拟产品是什么意思(微信充值虚拟商品限额)

  • 4d打印技术是什么(4d打印技术的研究进展)

    4d打印技术是什么(4d打印技术的研究进展)

  • 荣耀30pro发热严重(华为荣耀30pro使用发热情况)

    荣耀30pro发热严重(华为荣耀30pro使用发热情况)

  • alt加回车键什么意思(alt加回车没有用)

    alt加回车键什么意思(alt加回车没有用)

  • 笔记本网速慢如何解决(笔记本网速慢如何修复)

    笔记本网速慢如何解决(笔记本网速慢如何修复)

  • 小米8怎么设置门禁卡(小米8怎么设置指纹解锁)

    小米8怎么设置门禁卡(小米8怎么设置指纹解锁)

  • 华为p30pro怎么放手机卡(华为p30pro怎么放大APP的字体)

    华为p30pro怎么放手机卡(华为p30pro怎么放大APP的字体)

  • 如何固定word中横线的长度(如何固定word中的图片不动)

    如何固定word中横线的长度(如何固定word中的图片不动)

  • 快手直播怎么投屏到电脑(快手直播怎么投流量)

    快手直播怎么投屏到电脑(快手直播怎么投流量)

  • 魔筷tv怎么申请开店(魔筷星选怎么开通)

    魔筷tv怎么申请开店(魔筷星选怎么开通)

  • 怎么拍特效视频(拍特效视频最好的是什么软件)

    怎么拍特效视频(拍特效视频最好的是什么软件)

  • 苹果怎么把图片转文字(苹果怎么把图片拼在一起变成一张图)

    苹果怎么把图片转文字(苹果怎么把图片拼在一起变成一张图)

  • 陌陌现在怎么不能视频了     (陌陌现在怎么不能发红包了)

    陌陌现在怎么不能视频了 (陌陌现在怎么不能发红包了)

  • 华为荣耀8x可不可以遥控空调(华为荣耀8x可不可以无线充电?)

    华为荣耀8x可不可以遥控空调(华为荣耀8x可不可以无线充电?)

  • 冬天树枝上的大山雀,法国 (© Eric Ferry/Alamy)(宝宝不肯坐推车怎么办)

    冬天树枝上的大山雀,法国 (© Eric Ferry/Alamy)(宝宝不肯坐推车怎么办)

  • 总结帝国CMS下在PHP文件中调用数据库类执行SQL语句实例(帝国cms专题)

    总结帝国CMS下在PHP文件中调用数据库类执行SQL语句实例(帝国cms专题)

  • 个税系统经营所得如何添加人员信息
  • 海关完税凭证抵扣清单在哪里
  • 收到生育险报销会计怎么写摘要呢
  • 建筑业工会经费0.12% 怎么来的
  • 代理记账有什么风险吗
  • 增值税普票没有税率怎么回事
  • 企业所得税债务重组所得
  • 生产过程中产品的质量保证体系
  • 股东货币出资比例
  • 物业公司收取的电费怎么确认收入
  • 普通发票发票联丢了
  • 财务负责人和办税人员哪个责任大
  • 滞留发票的税收处理
  • 旅行社代订机票发票写个人能报销吗
  • 开户存入现金计什么科目
  • 未确认收入的增值税怎么记账
  • 公户以借款形式打款给个人,对个人有影响么?
  • 特种设备培训费计入什么会计科目
  • 公司的电话费计入什么科目
  • 调整以前年度损益调整汇算清缴
  • 增加住房收入
  • 造价咨询暂定级能接业务吗
  • 长期借款和短期借款时间
  • 营业外收入怎么做会计凭证
  • 王者荣耀中李白第二次离开
  • php版本升级
  • 软件登记费用
  • soft version
  • 对公帐户定期存款利率
  • 不征税收入用于支出所形成的费用是什么意思
  • hbuilder怎么下载
  • 物资销售经营范围
  • php做
  • el-upload上传文件大小限制
  • 最快超级计算机我国
  • 解决的英文
  • 日落时分是什么意思
  • ChatGPT-Next-Web:Vercel 和 Cloudflare 的快速部署
  • 银行存款账面余额与银行账户余额
  • php面向对象的三大特征
  • 企业利息支出怎么算
  • file读取文件内容
  • Python变量中forain
  • vue+ele
  • 平行结转分步法的特点
  • 固定资产转在建工程
  • mysql数据库命名 可以用-吗
  • 广告制作费怎么入账
  • 销项税进项税月末怎么处理
  • 转增资本需要交税吗
  • 母公司无偿给子公司房屋使用谁交房产税呢
  • 纸质汇票什么时候能到账
  • 领用包装物用于包装产品的会计分录
  • 单位买的职工社保自己可以去社保局领卡吗
  • 退货销售折让会计分录
  • 小规模需要进项税额吗
  • 设备基础属于什么基础
  • sql server存储过程写法
  • mysql怎么切换到bin目录
  • sql语句相似度计算
  • sqlserver数据完整性
  • windows2008教程
  • 清除cmos后电脑不启动
  • 电脑删除ie后怎么恢复
  • 怎么在VMware上玩LOL
  • window系统怎么复制粘贴
  • Kali(debian) Too many open files 错误处理办法
  • apache zipfile
  • smss.exe是干嘛的
  • linux定时删除2天前的文件输出日志
  • win8系统升级
  • win8网络连接受限怎么处理
  • linux里面怎么截屏
  • win8怎么用一键ghost
  • jquerymobile
  • vue怎么做兼容
  • jq获取url
  • activity的跳转
  • aiclod
  • android8.0特性
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设