Vu生命周期2023

什么是生命周期?

每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。

beforeCreate( 创建前 )

  • 组件被创建之前会调用,data、methods都没有初始化,一般在这个阶段不进行操作。

created( 创建完成 )

  • 这个时候,Vue实例中的data、methods已经被初始化,属性也被绑定,但是此时组件的template还没有被挂载,还是虚拟dom,真实dom还没有生成。
  • 一般在created里面发送网络请求 ,监听watch数据 等等。

beforeMount( 组件挂载之前 )

  • 此时模板已经编译完成,但是还没有渲染到页面中,(即为虚拟dom加载为真实dom)
  • 一般在这个阶段不做操作

mounted( 组件挂载完成 )

  • 虚拟DOM生成真实DOM完成,此时模板已经被渲染成真实DOM
  • 作用:获取DOM,使用DOM

beforeUpdate( 组件更新之前 )

  • 更新前状态(view层的数据还没有改变,data中的数据已经改变了),重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发。也就是说数据已经改变了,DOM还没有更新。

updated( 组件更新完成 )

  • 数据已经更改完成,dom也重新render完成。

beforeUnmount( 组件卸载之前 )

  • 当这个钩子被调用时,组件实例依然还保有全部的功能。
  • 作用:清除计时器等等

unmounted( 组件卸载完成 )

  • 在一个组件实例被卸载之后调用。
  • 作用:卸载事件监听

猜你喜欢

转载自blog.csdn.net/m0_62336865/article/details/129790779
今日推荐