位置: IT常识 - 正文

Vue--》详解Vue组件生命周期的三个阶段(vue组件入门)

编辑:rootadmin
Vue--》详解Vue组件生命周期的三个阶段

推荐整理分享Vue--》详解Vue组件生命周期的三个阶段(vue组件入门),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue组件总结,vue组件实现,vue组件实现,vue组件实现原理,vue组件使用方法,vue组件入门,vue组成,vue组件入门,内容如对您有帮助,希望把文章链接给更多的朋友!

目录

组件生命周期

创建阶段

beforeCreate阶段:

created阶段:

beforeMount阶段:

mounted阶段:

运行阶段

beforeUpdate阶段:

updated阶段:

销毁阶段

beforeDestroy阶段:

destroyed阶段:

总结


组件生命周期

生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段。

生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。

创建阶段beforeCreate阶段:

我们在初始化事件和生命周期函数时,组件的 props/data/methods尚未被创建,都处于不可用状态。

<script>export default { props:['info'], data(){ return { message:'hello test' } }, methods:{ show(){ console.log('调用了 Test 组件的 show 方法'); } }, // 创建阶段的第一个生命周期 beforeCreate(){ console.log(this.info); //props console.log(this.message); //data this.show() //methods },}</script>

 因为不能使用 props/data/methods 但是我调用了,所有控制台报错。

created阶段:

我们已经初始化好 props、data、methods了,组件的 props/data/methods已创建好。都处于可用状态,但是组件的模板结构尚未完成!

<script>export default { props:['info'], data(){ return { message:'hello test' } }, methods:{ show(){ console.log('调用了 Test 组件的 show 方法'); } }, // 创建阶段的第二个生命周期函数 created(){ console.log(this.info); console.log(this.message); this.show() }}</script>

created生命周期函数非常常用,在日常项目开发中经常在它里面调用 methods 中的方法,请求服务器的数据,并且把请求到的数据,转存到 data 中,供 template 模板渲染的时候使用!

<template> <div> <h2>test组件--{{nums.length}}</h2> </div></template><script>export default { props:['info'], data(){ return { message:'hello test', nums:[] } }, methods:{ show(){ console.log('调用了 Test 组件的 show 方法'); }, initlist(){ const xhr = new XMLHttpRequest() xhr.addEventListener('load',()=>{ const result = JSON.parse(xhr.responseText) console.log(result); this.nums = result.data }) xhr.open('GET','请求的接口') xhr.send() } }, created(){ this.initlist() }}</script><style lang="less" scoped> div{ background-color: #f00; }</style>beforeMount阶段:

基于数据和模板,在内存中编译生成HTML结构。将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。

<template> <div> <h2 id="myid">test组件--{{nums.length}}</h2> </div></template><script>export default { props:['info'], data(){}, methods:{}, beforeCreate(){}, created(){}, beforeMount(){ console.log('beforeMount'); const dom = document.querySelector('#myid') console.log(dom); }}</script>

mounted阶段:

用内存中编译生成的HTML结构替换掉el属性指定的DOM元素,已经把内存中的HTML结构,成功渲染到了浏览器之中,此时浏览器中已经包含了当前组件的DOM结构。

<template> <div> <h2 id="myid">test组件--{{nums.length}}</h2> </div></template><script>export default { mounted(){ const dom = document.querySelector('#myid') console.log(dom); }}</script>

vue完成模板解析并把初识的真实DOM元素放在页面后(挂载完毕)调用 mounted。

<template> <div> <h2 :style="{opacity}">欢迎学习Vue</h2> </div></template><script>export default { data(){ return { opacity:1 } }, mounted(){ setInterval(()=>{ //我们在使用箭头函数时,this的指向mounted自动帮我们设置好是 vm 了 this.opacity-=0.01 if(this.opacity <= 0) this.opacity = 1 },6) },}</script>

运行阶段

所谓运行阶段就是用户与组件产生交互

beforeUpdate阶段:Vue--》详解Vue组件生命周期的三个阶段(vue组件入门)

这个函数的触发的必要前提是,我们修改了 data 里面的数据。将要(注意:仅仅是将要,还没有呢)根据变化过后最新的数据,重新渲染组件的模板结构。

<template> <div> <h2 id="myid">{{message}}</h2> <button @click="message+='~'">点击修改message值</button> </div></template><script>export default { data(){ return { message:'hello test', } }, beforeUpdate(){ console.log('beforeUpdate'); //说明:点击按钮修改data值才能触发这个函数 console.log(this.message); //打印修改后的值 const dom = document.querySelector('#myid') console.log(dom.innerHTML); //打印整个文本,但并没有出现我们修改后的值,说明页面并没有重新渲染 }}</script>

updated阶段:

已经根据最新的数据,完成了组件的DOM结构的重新渲染。注意:当数据变化之后,为了能操作到最新的 DOM 结构,必须把代码写到 updated 生命周期函数中。

<template> <div> <h2 id="myid">{{message}}</h2> <button @click="message+='~'">点击修改message值</button> </div></template><script>export default { props:['info'], data(){ return { message:'hello test', } }, updated(){ console.log('updated'); console.log(this.message); //打印修改后的值 const dom = document.querySelector('#myid') console.log(dom.innerHTML); //打印整个文本,但出现了我们修改后的值,说明页面被重新渲染 }}</script>销毁阶段

完全销毁一个实例。清理它(vm)与其它实例的连接,接绑它的全部指令及事件监听器。

beforeDestroy阶段:

将要销毁此组件,此时尚未销毁,组件还处于正常工作状态。在这阶段一般做一些首尾工作。

<template> <div> <h2 id="myid">{{message}}</h2> <button @click="message+='~'">点击修改message值</button> </div></template><script>export default { props:['info'], data(){ return { message:'hello test', } }, beforeDestroy(){ console.log('beforeDestroy'); }}

destroyed阶段:

销毁当前组件的数据侦听器、子组件、事件监听等,组件已经被销毁,此组件在浏览器中对应的DOM结构已被完全移除!

直接暴力的将vm干掉,页面就不能再进行交互。设置透明的按钮也就作废了。

<template> <div> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="opacity = 1">透明度设置为1</button> <button @click="stop">点我停止变化</button> </div></template><script>export default { data(){ return { opacity:1 } }, methods:{ stop(){ // clearInterval(this.timer) this.$destroy() } }, mounted(){ // const dom = document.querySelector('#myid') // console.log(dom); console.log('mounted',this); this.timer = setInterval(()=>{ console.log('setInterval'); this.opacity-=0.01 if(this.opacity <= 0) this.opacity = 1 },6) }, beforeDestroy(){ clearInterval(this.timer) console.log('vm即将被销毁'); }}</script><style lang="less" scoped> div{ // background-color: #f00; }</style>

1)销毁后借助Vue开发者工具看不到任何信息。

2)销毁后自定义事件会失效,但原生的DOM事件依然有效

3)一般不会在beforeDestroy操作数据,因为即使操作数据,也不会再触发更新流程了

总结

生命周期:

1)又称:生命周期回调函数、生命周期函数、生命周期钩子。

2)含义:vue在关键时刻帮助我们调用一些特殊名称的函数。

3)生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。

4)生命周期函数中的this指向是 vm 或 组件实例对象。

常用的生命周期钩子:

1)mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)

2)beforeDestroy:清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容,但以后它将是一个有用的参考。

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

上一篇:机器学习——BP神经网络详细介绍及案例Python代码实现

下一篇:uni.getSystemInfo(OBJECT)

  • 一般纳税人申报纳税的流程
  • 公司账户短期理财收益要交税吗
  • 成本税率计算公式
  • 企业可以采用多品牌战略吗
  • 未达账项有几种情况
  • 在建工程的利息支出
  • 金碟系统操作
  • 企业出租房屋交什么税?
  • 季初是什么意思
  • 旅行社差额征收的会计处理
  • 新购进的固定资产可以一次性抵扣
  • 公司账户怎么走账
  • 股东折价入股会计分录
  • 冲减往年收入会计分录
  • 企业自用的厂房计入什么科目
  • 固定资产折旧率是多少
  • 存货的入账价值怎么计算
  • 自行研发的专利权计入
  • ibm笔记本进bios
  • smtplib教程
  • php命令行执行文件
  • 建筑企业被靠挂靠怎么办
  • 前端获取post请求返回数据
  • .fas文件病毒
  • 往来款怎么查
  • 企业收回应收账款会计分录
  • 劳务发票服务类型有哪些
  • php 文件传输
  • 罚款支出计入什么
  • webpack与gulp面试题
  • photo-sphere-viewer中文文档
  • yolov5 output
  • 销售部门招待费用预算
  • 劳动仲裁支付的赔偿金怎么入账
  • 哪些计入管理费用哪些计入资本公积
  • 织梦cms为什么不维护了
  • 织梦程序
  • 合同资产科目包含增值税吗
  • 股权激励如何做会计分录
  • 费用结转的方法有哪些
  • 主要业务是生产销售家电
  • Sql Server 2005的1433端口打开局域网访问和进行远程连接
  • 企业与个人之间关系的理解
  • 专项资金支出时间规定
  • 印花税漏报,税务局怎么罚款
  • 暂估成本的账务怎么处理
  • 建筑企业收挂靠公司管理费如何做账?
  • 增值税涉及的税目有哪些
  • 如何解决私账流失问题
  • 融资租赁首付款的性质
  • 企业被收购会产生哪些税
  • 年底应交增值税是没有余额吗
  • 租赁费计提部分算入印花税吗
  • 汇算清缴后缴纳所得税会计分录
  • 母公司与子公司的区别
  • 什么是资产减值准备计提
  • sql多表连接查询效率
  • centos页面
  • windows防火墙无法更改某些设置错误代码0×80070422
  • linux网络设置在哪里
  • windows7开始菜单设置在哪里
  • win8.1网络设置
  • win8的显示设置
  • windows更新后桌面没反应
  • win7系统怎样安装字体
  • Win10 Mobile 10586.107怎么更新?Lumia950/XL/550可升级
  • SpriteBuilder Demo学习笔记
  • 代码整洁之道 高清pdf
  • 很不错的成语
  • Linux删除大量文件
  • node.js实战
  • 快速备份mysql数据库
  • jquery移动端ui框架
  • jquery的认识和使用
  • js实现点击按钮移动滑块到另一个按钮的方法
  • jquery 使用
  • android sdk api文档
  • 陕西省税务局发来信息通知
  • 安徽省定额发票真伪查询
  • 美国买房hoa
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设