当前位置: 首页 > news >正文

Vue中this.$nextTick的执行时机

一、Vuethis.$nextTick的执行时机,整体可分为两种情况:

第一种:下一次 Dom 更新之后执行(即等待DOM更新结束之后,执行nextTick的延迟回调函数);
第二种:页面挂载后 (mounted)执行。

二、使用场景与举例:

对应第一种:
a. 修改数据后需要等待Vue.js完成视图更新后,再执行特定的逻辑。
b. 在事件触发修改数据的时候,不是立即获取页面最新的节点,而是等到页面重新渲染完成以后再次执行回调方法中的内容。

methods: {// ...example: function () {// 修改数据this.message = 'changed'// ....一些逻辑// DOM 还没有更新this.$nextTick(function () {// DOM 现在更新了this.doSomethingElse()})}}

对应第二种:
c. 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick

mounted: function () {this.$nextTick(function () {// 仅在整个视图都被渲染之后才会运行的代码})
}

实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。

更多内容参考:vue官网-nextTick

http://www.lryc.cn/news/261181.html

相关文章:

  • Unity中的ShaderToy
  • 2 使用postman进行接口测试
  • 【数据库设计和SQL基础语法】--查询数据--聚合函数
  • Module ‘app‘: platform ‘android-33‘ not found.
  • MySQL按序批量操作大量数据
  • strict-origin-when-cross-origin
  • 【置顶】 本博博文汇总
  • react.js源码二
  • 如何学习英语
  • robot测试自动化
  • Linux---重定向命令
  • 小区生活污水处理需要哪些设备和工艺
  • 【高性能计算】Cpp + Eigen + Intel MKL + 函数写成传引用
  • 【教学类-05-02】20231216 (比大小> <=)X-Y之间的比大小88题(补全88格子,有空格分割提示)
  • 【Spark精讲】Spark与MapReduce对比
  • SQL错题集3
  • Elasticsearch:使用 OpenAI 生成嵌入并进行向量搜索 - nodejs
  • [python高级编程]:02-类
  • java.lang.UnsupportedOperationException异常解决
  • openmediavault debian linux安装配置企业私有网盘(三 )——raid5与btrfs文件系统无损原数据扩容
  • Two Phase Termination(两阶段)设计模式
  • 闲人闲谈PS之四十九——PLM和SAP集成常见的问题
  • 帆软BI目录
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • 【CSS】前端点点点加载小点样式css动画过程实现
  • 【LeetCode: 2415. 反转二叉树的奇数层 | BFS + DFS】
  • 期货股市联动(期股联动助推资本市场上扬)
  • 生成式AI的力量,释放RPA的无限潜能
  • 【leetcode】链表总结
  • 焦虑,其实是你自愿选择的