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

387 阅读1分钟

概念

每个vue实例被创建的时候都会经历过一系列的初始化步骤。比如:数据观测、模板编译、挂载实例到DOM上、数据变化时更新dom等。在这个过程中会运行叫生命周期钩子的函数,以便用户在特定的阶段添加他们自己的代码。

Vue 生命周期总共可以分为8个阶段。创建前后、挂载前后、更新前后、销毁前后。以下是一些常用的钩子函数。

image.png

具体每个钩子做些什么?
  • beforeCreate:用于插件开发中执行一些特殊的任务。

  • create :组件初始化完毕,可以访问各种数据,获取接口等。

  • mounted: dom 已经创建了,可以用于访问数据和dom元素;访问子路由等。

  • beforeUpdate: 此时视图层还未更新,可以用于获取更新前的各种状态。

  • update: 完成视图更新,更新后所有状态都是最新的了。

  • beforeDestroy:实例销毁前调用,可用于一些定时器或订阅的取消。

  • destroyed:销毁⼀个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器