详解Vue生命周期

下图是vue官网的VUE实例生命周期图示:
Vue实例声明周期

按照图示,我们能解读到哪些内容呢?

  1. vue生命周期分为8个阶段: 创建前/后,载入前/后,更新前/后,销毁前/后
  2. 在创建前,即beforeCreate阶段,vue实例的的挂在元素和数据对象data都为undefined,还未初始化。
  3. created阶段,vue实例的数据对象data已经有了,el还没有
  4. 在载入前,及beforeMount阶段,vue实例的$eldata都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。
  5. mounted阶段,vue实例挂载完成,data.message成功渲染。
  6. 更新前/后:当data变化时,会触发beforeUpdateupdated方法
  7. 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
posted @ 2020-04-26 10:11  于鹏的博客  阅读(282)  评论(0)    收藏  举报