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

相关推荐
百锦再9 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code14 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*168814 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员1 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_1 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj11 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D11 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说11 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说12 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画