vue学习 十六 Vue生命周期

下图展示了实例的生命周期。不需要立马弄明白所有的东西,不过随着不断学习和使用,它的参考价值会越来越高。

vue学习 十六 Vue生命周期_第1张图片

Vue 有八种生命周期方法:

  1. Before create        组件实例化之前的函数
  2. Created               组件实例化完毕,但页面还没显示
  3. Before mount       组件挂载前,页面没有显示,但虚拟Dom已经配置
  4. Mounted               组件挂载后,该方法执行后页面显示
  5. Before update      组件更新前,页面未更新,但虚拟Dom已经配置
  6. Updated                组件更新,方法执行后页面显示
  7. Before destroy       组件销毁前
  8. Destroyed              组件销毁

当我们将上面的8中方法写在header.vue页面后,执行效果如下,从第一开始弹出,直到页面显示

vue学习 十六 Vue生命周期_第2张图片

你可能感兴趣的:(vue前端框架,vue初学之路)