位置: 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)

  • 支付宝火车票机票打不开(支付宝火车票机票小程序)

    支付宝火车票机票打不开(支付宝火车票机票小程序)

  • p40pro摄像头上一个小孔是干什么的(p40pro摄像头上一个小孔有灰)

    p40pro摄像头上一个小孔是干什么的(p40pro摄像头上一个小孔有灰)

  • 怎么下载谷歌商店(google谷歌下载)

    怎么下载谷歌商店(google谷歌下载)

  • 手机淘宝我的评价怎么删除(手机淘宝我的评价在哪里找?)

    手机淘宝我的评价怎么删除(手机淘宝我的评价在哪里找?)

  • 电脑不能播放视频是怎么回事(电脑不能播放视频文件怎么办)

    电脑不能播放视频是怎么回事(电脑不能播放视频文件怎么办)

  • 淘宝怎么运营才有流量(怎么运营好淘宝店)

    淘宝怎么运营才有流量(怎么运营好淘宝店)

  • amd x4 955相当于i几(amd x4 955 95w)

    amd x4 955相当于i几(amd x4 955 95w)

  • cpu温度高影响性能吗(cpu温度影响性能吗)

    cpu温度高影响性能吗(cpu温度影响性能吗)

  • 工业机器人编程方式有几种(工业机器人编程方式)

    工业机器人编程方式有几种(工业机器人编程方式)

  • 路由器接口不够用怎么办(路由器接口不够用,怎么添加交换机)

    路由器接口不够用怎么办(路由器接口不够用,怎么添加交换机)

  • 安卓手机开机键坏了如何开机(安卓手机开机键坏了怎么强制开机)

    安卓手机开机键坏了如何开机(安卓手机开机键坏了怎么强制开机)

  • 抖音能传多长的视频(抖音上能传多长的视频)

    抖音能传多长的视频(抖音上能传多长的视频)

  • 拍立得照片怎么显影(拍立得照片怎么复制)

    拍立得照片怎么显影(拍立得照片怎么复制)

  • 手机怎么改文件后缀(手机怎么改文件内容)

    手机怎么改文件后缀(手机怎么改文件内容)

  • vsco注册后会扣费吗(注册vsco也要扣钱吗)

    vsco注册后会扣费吗(注册vsco也要扣钱吗)

  • 快手极速版怎么保存视频(快手极速版怎么赚钱)

    快手极速版怎么保存视频(快手极速版怎么赚钱)

  • 苹果原装耳机坏了能修吗(苹果原装耳机坏了可以免费换吗)

    苹果原装耳机坏了能修吗(苹果原装耳机坏了可以免费换吗)

  • 华为gt手表怎么下载软件(华为gt手表怎么设置来电提醒)

    华为gt手表怎么下载软件(华为gt手表怎么设置来电提醒)

  • win10磁盘清理(win10磁盘清理没反应)

    win10磁盘清理(win10磁盘清理没反应)

  • 大疆御2使用技巧(大疆御2操作视频)

    大疆御2使用技巧(大疆御2操作视频)

  • 抖音里播放的次数作者算吗(抖音里播放的次数怎么看)

    抖音里播放的次数作者算吗(抖音里播放的次数怎么看)

  • 在手机上怎么把照片压缩(在手机上怎么把几个文件弄成一个压缩文件)

    在手机上怎么把照片压缩(在手机上怎么把几个文件弄成一个压缩文件)

  • Win10玩游戏提示显卡驱动已停止响应怎么办? 重置显卡驱动的技巧(win10玩游戏提示内存不足无法处理此命令)

    Win10玩游戏提示显卡驱动已停止响应怎么办? 重置显卡驱动的技巧(win10玩游戏提示内存不足无法处理此命令)

  • Windows7系统超简单word、Excel批量取消超链接的方法(windows7简洁版)

    Windows7系统超简单word、Excel批量取消超链接的方法(windows7简洁版)

  • 留底退税怎么做账务处理
  • 房产税城镇土地使用税申报期限
  • 个人缴纳职业年金是什么意思
  • 领发票凭证做什么用
  • 企业所得税资产总额怎么填写
  • 工资单上的retro
  • 企业名称变更需要重新核名吗
  • 兼营行为的税务处理办法
  • 出售无形资产计入资产处置损益还是营业外收入
  • 房屋估价入账需要计算什么税款?
  • 建筑行业机械租赁费计入什么科目
  • 外币账户间互转流程
  • 溢价或者折价购买债券的会计处理.
  • 增值税专用发票开错了咋办
  • 石家庄国税发票查验平台
  • 建筑分包项目有哪些内容
  • 怎么查企业的增值税纳税额
  • 当月有进项税额转出怎么结转未交增值税
  • 工商年报社保需要多少钱
  • 苹果14promax电池掉电很快
  • 费用发票可以不上账吗
  • 以前年度费用漏记了怎么办小企业会计准则
  • 固定资产进项税额转出怎么做账务处理
  • 苹果Mac系统怎么切换输入法
  • 接入设备检测
  • 企业所得税怎么上传报表
  • php生成1到100的数组
  • 台式机显示器推荐
  • win10关闭自动更新方法永久
  • 工业企业缴纳的税费种类包括
  • vue antdesign
  • zendstudio怎么创建php项目
  • php判断https
  • 出口货物不退税进项可以开具普通发票吗
  • 可供出售债权投资
  • 花生油加工厂的手续好办吗
  • 印花税零申报操作流程
  • python requests读取服务器响应
  • 主营业务收入含义
  • 技术服务收入属于什么收入
  • 筹资现金流量净额
  • 购置环保设备一次性扣除
  • 让渡资产使用权属于收入吗
  • 负数发票怎样做账
  • 阶段性减免企业社保费实施政策对象
  • 管理费用里面包括哪些明细科目
  • 纸质承兑汇票怎么兑现步骤
  • 一年内到期的非流动负债是经营性负债吗
  • 销售出库和产品入库有什么关系
  • 全国统一电子发票查询
  • 发票专用章盖在中间行不行
  • 排污费计入管理费用吗
  • 企业和职工之间的财务关系属于
  • mysql数据库优化面试题
  • mysql查找指定元素的位置
  • mysql 创建root用户和普通用户及修改删除功能
  • 输入法是全角在哪里设置
  • Oracle VM Virtual中CentOS自动获取IP地址设置方法
  • win10系统应用和浏览器控制需要启用吗
  • xp系统不能正常启动怎么修复
  • win7手动更新在哪里设置
  • window10里的ie浏览器
  • win7不重装修复系统
  • Win7系统电脑开不开机怎么办
  • cocos creator 发布web
  • perl调用系统命令
  • jqueryform表单提交
  • python查看文件类型
  • jquery异常捕获
  • node.js 的适用场景?
  • javascript的dom
  • 国家税务总局税法
  • 光伏发电备案证如何办理
  • 税务局发涵有几种
  • 上海餐饮增值税
  • 中国移动的电子协议推送服务是什么
  • 个人所得税app可以更改电话号码吗
  • 我们是小规模纳税人,有个人所得税代扣代缴的业务吗
  • 工本费每月都扣?
  • 中国涉农金融体系包括哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设