vue 钩子函数updated什么时候触发

触发时机

  • updated是Vue生命周期钩子函数之一,在组件的数据变化导致虚拟DOM重新渲染并应用到实际DOM之后触发。具体来说,updated会在以下几种情况下被触发:

  • 初始渲染完成后:当组件首次渲染完成并将虚拟DOM渲染到实际DOM之后,updated钩子函数会被调用。

  • 响应式数据变化时:当组件中的响应式数据发生变化时,虚拟DOM会重新渲染并应用到实际DOM,此时updated钩子函数会被调用。

  • 需要注意的是,updated在虚拟DOM重新渲染后立即触发,此时实际DOM可能还没有更新完成。如果需要等待实际DOM更新完成后执行一些操作,则可以使用Vue.nextTick方法。

问题场景

  • 外层传入一个父项id给子组件,需要更具这个id初始化列表
    最初使用mounted钩子函数的时候,导致只有第一次的时候加载了数据
  • 但是业务需要外层每次变化,内层组件都需要初始化列表
java 复制代码
  mounted() {
    console.log('costClassify mounted')
    this.refresh()
  },
  updated() {
    console.log('costClassify updated')
    this.refresh()
  }

但是这个地方使用watch好像也行

相关推荐
goms3 小时前
前端项目集成lint-staged
前端·vue·lint-staged
梁辰兴16 小时前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
ChongYu重玉16 小时前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
csj5018 小时前
前端基础之《Vue(22)—安装MongoDB》
前端·vue
寻觅~流光1 天前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
好青崧1 天前
单页面和多页面的区别和优缺点
前端·vue
程序猿小D1 天前
[附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
spring boot·mysql·vue·mybatis·毕业论文·答辩ppt·交流互动
好青崧2 天前
v-show和v-if的区别
vue
一笑code3 天前
UC浏览器PC版自2016年后未再更新不支持vue3
前端·vue
咔咔一顿操作3 天前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue