位置: 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安装步骤)

  • 增值税纳税申报时间
  • 税控盘解锁是什么意思
  • 个人生产经营所得税计算器
  • 三证合一是哪三证孩子上学
  • 企业捐赠扣除标准,超出部分
  • 通过物流中心再送货配货属视同销售吗
  • 网上申报增值税怎么操作
  • 小规模纳税人如何转一般纳税人
  • 厂部管理人员工资属于什么会计科目
  • 法律责任的具体内容
  • 税务局返还的代征代扣要交增值税吗
  • 城建税及教育费附加计提表
  • 增值税附加税什么情况交
  • 小企业会计准则科目
  • 发票作废了还能查验吗
  • 待摊费用属于什么费用
  • 工程项目预缴税金
  • 离退休员工再任职薪酬的财税处理?
  • 什么情况可以出境
  • 你需要来自system的权限怎么解决
  • 企业所得税什么时候交
  • laravel快速入门
  • 无序树有几种
  • 苹果电脑隐藏软件功能怎么开启
  • 呆滞品报废入什么科目
  • 实际投资收益率等于什么
  • 企业收购特殊税种有哪些
  • 增值税征税范围中的货物包括
  • 怎么让win7不锁定
  • php改编码
  • 委托加工物资增值税计税依据
  • but all failed
  • 机器学习中的预测评价指标MSE、RMSE、MAE、MAPE、SMAPE
  • ChatGPT 编写模式:如何高效地将思维框架赋予 AI ?
  • 你应该知道的数学常识纪录片
  • php array_multisort 对数组进行排序详解及实例代码
  • php自定义函数实现计算整数的四次方
  • 外经证逾期未核销
  • 企业销售旧车增值税处理
  • 劳务费过账
  • 补缴税款账务处理
  • 多缴所得税怎么算
  • 原材料盘盈会计处理
  • 销售成本转结分录
  • 公司注销其他应收款怎么冲平
  • 货运代理费计入什么科目
  • 不能防止sql注入
  • mysql error!
  • 增值税进项税额加计抵减政策
  • 股权收购协议书实际案例
  • 固定制造费用需要逐项进行预计通常与本期产量无关
  • 公司不注销会坐牢吗
  • 劳务费会计分录是什么
  • 报销原材料运输费怎么算
  • 有限责任公司和有限公司区别在哪
  • 原材料暂估入库是什么意思
  • 防伪税控开票系统SOAP服务端
  • 银企对账操作流程
  • 企业零申报要报哪些税
  • 提前还贷款要满十八岁吗
  • sql中case when的用法
  • xp系统内存不足怎么办
  • 理解 成为 超越梗
  • 如何创建ubuntu安装教程
  • ubuntu怎么禁用nouveau
  • win8出现问题需要重启
  • win8怎么打开系统设置
  • linux系统中用户账户有哪些分类
  • windows10秋季更新
  • ServiceLayer.exe - ServiceLayer是什么进程 有什么用
  • windows8任务栏在下面怎么不显示
  • win10怎么把动图设置成壁纸
  • node linux安装
  • 进入cmd命令
  • unity3d Human skin real time rendering with blood and water drop effect真实模拟人皮实时渲染之血液和水珠掉落效果
  • javascript教程代码
  • js中的?
  • 土地增值税清算时间要求
  • 地税客服电话
  • 四川 国税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设