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

  • iqoo8pro锁屏怎么打开控制中心(iqoo8pro锁屏怎么调亮)

    iqoo8pro锁屏怎么打开控制中心(iqoo8pro锁屏怎么调亮)

  • vivoy50是4g还是5g(vivo y50是4g还是5g)

    vivoy50是4g还是5g(vivo y50是4g还是5g)

  • 佳能打印机如何重新设置wifi(佳能打印机如何连接电脑)

    佳能打印机如何重新设置wifi(佳能打印机如何连接电脑)

  • 小米10支持立体声扬声器吗(小米10s立体图)

    小米10支持立体声扬声器吗(小米10s立体图)

  • 抖音怎么加好友(抖音怎么加好友聊天)

    抖音怎么加好友(抖音怎么加好友聊天)

  • 苹果充电线第四个触点发黑怎么办(苹果充电线第四条变黑)

    苹果充电线第四个触点发黑怎么办(苹果充电线第四条变黑)

  • 一个人可以加几个企业微信(一个人可以加几个抖音粉丝团)

    一个人可以加几个企业微信(一个人可以加几个抖音粉丝团)

  • 手机老显示请检查网络设置怎么办(手机老显示检测到充电口有水)

    手机老显示请检查网络设置怎么办(手机老显示检测到充电口有水)

  • 小红书自定义标签太长怎么看(小红书自定义标签)

    小红书自定义标签太长怎么看(小红书自定义标签)

  • ipad充电半天还是红色(ipad充半天还是1)

    ipad充电半天还是红色(ipad充半天还是1)

  • 华为手机拍照怎么显示手机型号(华为手机拍照怎么显示地理位置和时间)

    华为手机拍照怎么显示手机型号(华为手机拍照怎么显示地理位置和时间)

  • 喜马拉雅上传音频审核未通过怎么办

    喜马拉雅上传音频审核未通过怎么办

  • qq互联业务登录能干嘛(qq互联业务登录直接被盗)

    qq互联业务登录能干嘛(qq互联业务登录直接被盗)

  • 三星s20出厂自带保护膜吗(三星s20出厂带手机壳吗)

    三星s20出厂自带保护膜吗(三星s20出厂带手机壳吗)

  • qq提交作业别人会不会看到(qq提交作业别人能看到吗)

    qq提交作业别人会不会看到(qq提交作业别人能看到吗)

  • 文档查找关键字怎么在文档中找(文档查找关键字在哪里)

    文档查找关键字怎么在文档中找(文档查找关键字在哪里)

  • 华为p40pro可以无线充电吗(华为p40pro可以无线反向充电吗)

    华为p40pro可以无线充电吗(华为p40pro可以无线反向充电吗)

  • wps演示支持什么视频格式(wps演示可以打开pdf吗)

    wps演示支持什么视频格式(wps演示可以打开pdf吗)

  • 光盘属于什么存储介质(光盘属于什么存储设备)

    光盘属于什么存储介质(光盘属于什么存储设备)

  • ps制作扇形文字的方法(ps制作扇形文字怎么做)

    ps制作扇形文字的方法(ps制作扇形文字怎么做)

  • 台式机太卡了怎么办(台式机电脑很卡怎么办)

    台式机太卡了怎么办(台式机电脑很卡怎么办)

  • vue怎么调节时间(vue怎么设定时长和片段)

    vue怎么调节时间(vue怎么设定时长和片段)

  • oppor15的呼吸灯怎么设置(oppor 17呼吸灯)

    oppor15的呼吸灯怎么设置(oppor 17呼吸灯)

  • 悦作业怎么看不了答案(悦作业app)

    悦作业怎么看不了答案(悦作业app)

  • 微信红包怎么显示公司(微信红包怎么显示)

    微信红包怎么显示公司(微信红包怎么显示)

  • pcb是什么意思(高频pcb是什么意思)

    pcb是什么意思(高频pcb是什么意思)

  • 手机电耗得快怎么办(手机电量耗太快)

    手机电耗得快怎么办(手机电量耗太快)

  • kiwal10是什么型号(kiwal10是什么型号多少钱)

    kiwal10是什么型号(kiwal10是什么型号多少钱)

  • 确认递延所得税资产会计处理
  • 一般纳税人商品混凝土税率
  • 汽车购置税计算器2019
  • 工资申报是当月申报当月的吗
  • 小规模纳税人专票免税吗?
  • 土地使用权摊销计入在建工程
  • 固定资产转让开票金额是净值
  • 外购的商誉如何做账
  • 偶然所得个税怎么计算公式
  • 车辆报废补贴多久到账
  • 其他收益是否需缴税
  • 某企业原材料采用实际成本核算,2019年6月
  • 如何查询增值税申报表
  • 增值税普通发票税率表
  • 变更财务负责人在网上变更流程
  • 工商年报填错了能改吗
  • 非汉语是什么意思
  • 工地伙食标准 费用
  • 科技项目经费怎么申报
  • 电脑不用的情况下怎么让它关闭屏幕
  • 华为鸿蒙系统开发平台
  • 在公司预支费用怎么写单据
  • 苹果15手机价格和图片颜色
  • php str函数
  • php字符串赋值
  • 递归 php
  • php入门例子
  • 房地产企业收入确认
  • 年终奖发放形式 更改 税务局
  • 门诊部需要药品经营许可证吗
  • 动态设置窗体记录源属性
  • 《一文搞懂IoU发展历程》GIoU、DIoU、CIoU、EIoU、αIoU、SIoU
  • 帝国cms功能
  • 税收返还会计处理办法
  • 购进免税农产品进项税额转出
  • 服务费开票税收分类
  • 合伙企业分红怎么做账
  • 权益法下公允价值变动计入其他综合收益
  • 以公司名义买500万的车省多少税
  • 一般纳税人可以开1%的发票吗
  • 主营业务成本如何设置明细
  • 企业变卖汽车收入要交增值税吗
  • 税控系统专用设备包括税控收款机吗
  • 银行日记账更正
  • 旅游发票可以报销入什么明细
  • 金蝶k3怎么打印科目余额表
  • 开办费没发票如何做账?
  • 小企业建账流程图
  • mysql从5.7升级至8.0
  • centos下安装jdk
  • linux系统的基本特征
  • iptables配置文件详解
  • unix系统复制命令
  • 如何用pe弄双系统引导
  • xp开始界面
  • 亲测可用抖音低价单赚派费项目
  • 如何让电脑启动更快
  • rapapp.exe - rapapp是什么进程 有何作用
  • win7桌面提示7601
  • js如何使用
  • 深入剖析典型案例
  • listview.selecteditems
  • cocos2dx-js
  • 着色器模型
  • 断开网络联结的手机
  • android 刷新view
  • jquery jsonview
  • linux shell实战
  • unity3d all compiler errors
  • 脚本 python
  • javascript编程技术
  • python基本介绍
  • jquery文档处理有哪些
  • javascript数据结构与算法百度云视频资源
  • jquery遍历li
  • 税务分局是什么意思
  • 银行代扣流程
  • 个体工商户票种核定金额应该填多少
  • 青霉素过敏是因为提纯不好吗
  • 完税证明在哪里查询打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设