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

  • 税负统计口径
  • 印花税税源明细表怎么填
  • 银行存款对银行的作用
  • 一般纳税人差额征税申报表怎么填
  • 房地产企业汇算清缴要点
  • 股权出让需要交税吗
  • 城镇土地使用税的计税依据
  • 分摊长期待摊费用的会计分录
  • 小规模纳税人可以转为一般纳税人吗?
  • 税务管理相关知识
  • 增值税专票电话号码错了有关系吗
  • 没有缴纳社保怎么开证明
  • 利润是负数不用计提所得税规定是什么?
  • 临时工工资个税怎么算
  • 金三系统打印控件下载及报税流程
  • 法院拍卖破产企业房产,税费问题
  • 增值税差额征收企业所得税主营业务收入应按什么计入
  • 补缴员工社保银行怎么查
  • 服务费发票可以部分红冲吗
  • 自营出口与委托代理哪个划算
  • 出差补贴算工资薪金吗
  • 医生规培生补贴每年多少钱
  • 新会计规定工会会计制度
  • 长期股权投资转出账务处理
  • 公司已经改名原来的公章还有效吗
  • 公司准备上市到真正上市要多久
  • PHP:time_sleep_until()的用法_misc函数
  • cmdkill进程
  • php 二叉树的遍历
  • 金融业务增值税税率
  • 补发的商品要钱吗
  • 企业迁址如何办理手续
  • 短期借款会计分录例题
  • 纳税人转让旧房及建筑物
  • 办公室设计费计入什么
  • 炫酷登录注册教程
  • 太原市插画工作室
  • 金税盘干嘛用
  • groupdel命令详解
  • 企业处置固定资产发生的净损失应计入
  • 在计算土地增值税时质量保证金可以扣除
  • 申报高新企业的好处
  • 专项扣除三险一金是哪三险
  • 个人所得税计提会计分录怎么做
  • 个人所得税逾期申报怎么办
  • 一般纳税人登记 核算地址
  • 有限合伙企业分红原则
  • 进项抵扣和销项抵扣
  • 活动经费要发到每个员工
  • 小规模增值税减免
  • 房屋租赁违约金怎么规定
  • 债券票面利率与期限成正比
  • 税收罚款支出计算公式
  • 同比增长怎么算出来的
  • Mysql5.7.11在windows10上的安装与配置(解压版)
  • mssql insert into 和insert into select性能比较
  • win8.1官方
  • win8系统安装步骤
  • win10怎么用ghost
  • “incorrect super block” FreeBSD挂载CDROM时报错误的解决方法
  • 在一台电脑安装两个省份个税系统
  • win8系统的电脑
  • xp内置语音输入没反应
  • mac怎么切换输入法
  • win7系统搜索不到自己家wi-fi
  • win7系统的电脑
  • win8.1system磁盘占用率高
  • unity脚本编写教程
  • ExtJS如何设置与获取radio控件的选取状态
  • 高级控件动态数据加载过程有哪些
  • dos cat命令
  • react-navigation 如何判断用户是否登录跳转到登录页的方法
  • MVC Ajax Helper或Jquery异步加载部分视图
  • shell脚本 -ne 0
  • python ping ip地址
  • node.js介绍
  • 四川国税局普通发票查询?
  • 工资6200要交多少个人所得税
  • 怎样从税务局网上交医保
  • 重庆国税电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设