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好像也行

相关推荐
叫我阿柒啊2 小时前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
借你耳朵说爱你4 小时前
浅拷贝和深拷贝两种不同的对象复制
vue·web
F2E_Zhangmo7 小时前
基于cornerstone3D的dicom影像浏览器 第四章 鼠标实现翻页、放大、移动、窗宽窗位调节
vue·cornerstone·cornerstone3d·cornerstonejs
最好结果1 天前
ruoyi系统-vue-elementui 表格单元格点击复制功能实现:实践与问题解决
vue
叫我阿柒啊2 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
工业互联网专业2 天前
基于Spark的新冠肺炎疫情实时监控系统_django+spider
python·spark·django·vue·毕业设计·源码·课程设计
SheldonChang3 天前
Onlyoffice集成与AI交互操作指引(Iframe版)
java·人工智能·ai·vue·onlyoffice·postmessage
lichong9513 天前
【混合开发】Android+Webview+VUE播放视频之视频解析工具mediainfo-Macos
android·macos·架构·vue·音视频·api·postman