vue-03简述 Vue 的⽣命周期以及每个阶段做的事

398 阅读1分钟
  • 1.每个Vue组件实例被创建后都会经过⼀系列初始化步骤,⽐如,它需要数据观测,模板编译,挂载实例到dom 上,以及数据变化时更新dom。这个过程中会运⾏叫做⽣命周期钩⼦的函数,以便⽤户在特定阶段有机会添加他们 ⾃⼰的代码。
  • 2.Vue⽣命周期总共可以分为8个阶段:创建前后, 载⼊前后, 更新前后, 销毁前后,以及⼀些特殊场景的⽣命周期。 vue3中新增了三个⽤于调试和服务端渲染场景。

1.png

  • 4.结合实践:
    • beforeCreate:通常⽤于插件开发中执⾏⼀些初始化任务
    • created:组件初始化完毕,可以访问各种数据,获取接⼝数据等
    • mounted:dom已创建,可⽤于获取访问数据和dom元素;访问⼦组件等。
    • beforeUpdate:此时 view 层还未更新,可⽤于获取更新前各种状态
    • updated:完成 view 层的更新,更新后,所有状态已是最新
    • beforeUnmount:实例被销毁前调⽤,可⽤于⼀些定时器或订阅的取消
    • unmounted:销毁⼀个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器

2.png

5、追问

    1. setup和created谁先执⾏? setup里面没有beforeCreate和created
    • setup最先执行,处理完毕后,才会处理options created在options生命周期里
    1. setup中为什么没有beforeCreate和created?
    • 执行setup时,组件实例已经创建了,beforeCreate和created只在options中使用,在此处没有意义

6、源码中数据获取,没有理由混用

06.png