Vue的生命周期钩子函数

创键阶段

• beforeCreate: vue在创建数据和方法之前会调用该系统函数

  • 特点: 在执行beforeCreate的时候, 还没完成数据和方法的创建, 所以数据和方法处于不可用的状态

  • 执行条件: 无条件执行

  • 执行次数: 1次

• created: vue在完成数据和方法的创建之后, 会主动调用

  • 特点: 在执行created的时候, 已经完成了数据和方法的创建, 所以数据和方法处于可用状态

  • 应用场景: 可以在created中请求默认需要向用户展示的一些数据

  • 执行条件: 无条件执行

  • 执行次数: 1次

挂载阶段

• beforeMount: vue即将对视图进行处理的时候, 会自动调用

  • 执行条件: 无条件执行

  • 执行次数: 1次

  • 特点: 还没有完成视图挂载, 所以不能在此处操作DOM

• mounted: vue完成视图处理之后, 会自动调用

  • 执行条件: 无条件执行

  • 执行次数: 1次

  • 特点: 已经完成了视图的挂载, 所以可以在此处操作DOM

  • 应用场景: 如果我们使用了一些需要在初始化的时候操作DOM的js插件, 并且该插件需要在页面初次渲染的时候进行初始化, 那么就可以将该插件的初始化操作放在mounted中来进行

 运行阶段

• beforeUpdate: 当vue即将进行更新操作( 数据和视图的更新)的时候, 自动调用

  • 执行条件: 只有更新了一个在视图中引用过的数据

  • 执行次数: 若干次

  • 特点: 只完成了数据的更新, 还没有成视图更新

• updated: 当vue完成更新操作的时候, 自动调用

  • 执行条件: 只有更新了一个在视图中引用过的数据( 数据和视图的更新)

  • 执行次数: 若干次

  • 特点: 已经完成了数据和视图的更新

销毁阶段 

• beforeDestroy: vue实例即将销毁的时候, 会自动调用

  • 执行条件: vue实例销毁

  • 执行次数: 1次

• destroyed: vue实例销毁之后,会自动调用

  • 执行条件: vue实例销毁

  • 执行次数: 1次