vue生命周期mounted数据更新时解析

最新推荐文章于 2024-05-25 13:46:03 发布
最新推荐文章于 2024-05-25 13:46:03 发布
阅读量2.9k 收藏 2
点赞数
文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52889573/article/details/110950642
版权

前面我们简单的介绍了一下vue的生命周期，今天在深入了解一下生命周期中的mounted。
根据之前的简单分析生命周期来看当我们的页面完完整整的展现在了我们眼前的话，生命周期就已经到了mounted这个周期内部
在这里插入图片描述
当我们代码发生变化时，视图也理应发生变化，就进行了如图所示的循环。

  1. 当我们的代码发生改变时，此时在beforeUpdate阶段
  2. 代码进行改变从而影响视图发生改变，需要一定的时间，那我们什么时候可以获取并打印出我们修改的数据呢？
  3. 首先我们应该想到updated这一个周期中，当我们想到并查看该周期的文档时我们又发现
    在这里插入图片描述

可以看到vue官方文档写的不会保证所有的子组件一起被重绘，建议我们使用vm.$nextTick，那么我们可以转到该方法的文档看一下

在这里插入图片描述

可以看到在vm. n e x t T i c k 这 个 方 法 中 我 们 就 可 以 获 取 到 被 重 绘 的 D O M 。 原 理 无 非 就 是 当 数 据 改 变 时 视 图 不 会 立 即 发 生 改 变 。 需 要 一 定 的 时 间 。 我 们 也 可 以 写 一 个 定 时 器 在 50 毫 秒 获 取 ， 只 不 过 该 方 法 的 使 用 有 很 大 的 漏 洞 ， 建 议 还 是 使 用 官 方 的 v m . nextTick这个方法中我们就可以获取到被重绘的DOM。 原理无非就是当数据改变时视图不会立即发生改变。需要一定的时间。我们也可以写一个定时器在50毫秒获取，只不过该方法的使用有很大的漏洞，建议还是使用官方的vm. nextTick这个方法中我们就可以获取到被重绘的DOM。原理无非就是当数据改变时视图不会立即发生改变。需要一定的时间。我们也可以写一个定时器在50毫秒获取，只不过该方法的使用有很大的漏洞，建议还是使用官方的vm.nextTick

多喝烫水_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue实例生命周期(全面解析)
08-29
下面小编就为大家带来一篇基于Vue实例生命周期(全面解析)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
excel workbook
qq_34873913的博客
03-06 711
引用不同的workbook 1.索引号 workbooks.item（3）=workbooks（3） 2.名称 当新建的文件，并没有保存的时候 workbooks(“book1”) 当已经存在的文件，要加上后缀 workbooks(“book1.xls”) workbook信息 cells（1,1）=thisworkbook.name cells（1,1）=thisworkbook.path ce...
vue 利用mounted函数获取最新更新的数据
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-21 6067
 利用mounted函数获取最新数据 核心代码： mounted(){ this.str='你好 世界' this.$nextTick(function(){ console.log(this.$refs.tit.innerHTML) }) }   <!DOCTYPE html> <...
POI(excel)中WorkBook和Sheet应用实践总结
热门推荐
小小默：进无止境
06-21 1万+
【1】WorkBook定义工作簿的高级表现形式，是sheet的上级对象。一个excel就是一个工作簿，一个工作簿含有多个工作表(sheet)。【2】WorkBook两种创建形式① 使用直接对象org.apache.poi.hssf.usermodel.HSSFWorkbook or org.apache.poi.xssf.usermodel.XSSFWorkbook示例如下：HSSFWorkbo
Excel WorkBook操作例
dongjiecong1365的博客
08-03 396
using System;using System.Data;using System.Drawing;using System.Windows.Forms;using Microsoft.VisualStudio.Tools.Applications.Runtime;using Excel = Microsoft.Office.Interop.Excel;using Office = ...
Excel VBA开发必须了解的与工作簿Workbook及工作表Worksheet相关的5个对象详解（附实用例程）
weixin_50233916的博客
07-16 4979
每一个使用过Excel的用户都了解工作簿和工作表这两个概念。工作簿，简单地说就是与一个excel文件对应，一个打开的excel文件就是一个工作簿。而工作表是工作簿的一部分，是一个独立的数据区域。一个工作簿中可以有很多工作表，在较老的office版本中，一个工作簿最多可允许建立255个工作表，但是目前最新的Office，理论上支持在一个工作簿中建立无限个工作表，只受电脑的硬件资源的限制。 Excel VBA开发中，工作簿集合WorkBooks ，工作簿Workbook，图与表集合Sheets
Vue生命周期activated之返回上一页不重新请求数据操作
10-15
主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue生命周期实例小结
10-18
主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下
Vue实例中生命周期created和mounted的区别详解
08-29
主要给大家介绍了关于Vue实例中生命周期created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
浅析Vue 生命周期
08-27
主要介绍了Vue 生命周期的过程，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
22个常用Excel函数大全，直接套用，提升工作效率！
Tybyqi的博客
12-14 3453
Excel曾经一度出现了严重Bug，主要有两种比较悲催的情况，首先是这种：   更加悲催的是这种：     言归正传，今天和大家分享一组常用函数公式的使用方法：职场人士必须掌握的12个Excel函数，用心掌握这些函数，工作效率就会有质的提升。 建议收藏备用着，有时间多学习操练下。 目录：数字处理、判断公式、统计公式、求和公式、查找与引用公式、字符串处理公式、其他常用公式...
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 219
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1078
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
global_coding的博客
05-24 299
vue 使用 export default
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 927
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
React18+TypeScript搭建通用中后台项目实战04 封装常用工具函数
最新发布
Python私教
05-25 239
此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。修改 src/api/request.ts。修改 src/page/Index.tsx。修改 src/page/Index.tsx。修改 src/page/Index.tsx。
js知识点汇总之let const 和 var的区别
fyw1789的博客
05-23 1458
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
Vue从入门到实战Day07
ltt159264的博客
05-21 922
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
TS中的InstanceType函数和Typeof 操作符
05-23 170
【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型。此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。获取由某个构造函数构造出来的实例类型组成的类型。操作符可以用来获取一个变量或对象的类型。
react和vue生命周期区别
05-23
React 和 Vue 是两个流行的 JavaScript 框架，它们都有自己的生命周期方法。React 的生命周期方法包括： 1. Mounting：组件被创建并且插入到 DOM 中。 - constructor: 组件构造函数 - getDerivedStateFromProps: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值