vue2生命周期相关问题

44 阅读2分钟

vue2生命周期有哪些?

  1. beforeCreate
     自身事件绑定和生命周期函数的初始化工作,Vue实例中还没有Data,el,methods相关属性
  2. created
     Vue实例已经初始化data属性和methods中相关方法,可以在此阶段调取后端数据了
  3. beforeMount
     进行模板编译,生成虚拟dom
  4. mounted
     将数据渲染到页面上,生成真实dom
  5. beforeUpdate
     Vue实例中data数据变化,但页面数据仍为旧数据,即data数据与页面数据不同步
  6. updated
     数据更新完成,页面与数据保持一致
  7. beforeDestory
     Vue实例中所有数据、methods、component还未销毁
  8. destoryed
     Vue实例彻底销毁

发送请求在那个生命周期?为什么不在其他生命周期?

 推荐在created中发送请求
 beforeCreate:获取不到methods,如果请求封装在methods中,获取不到方法
 mounted:如果没有父子组件依赖关系,放在mounted没有区别。如果有嵌套组件,要根据情况看,因为会先执行子组件的生命周期,再执行父组件的mounted,页面展示顺序会受到影响。

进入组件会执行哪些生命周期?

 beforeCreate、created、beforeMount、mounted

在created中如何获取Dom?

可以使用setTimeout、nextTick、promise等任何一步操作都可以。

如果父组件引入子组件,父子组件生命周期顺序是什么样的?

 创建组件时
 父:beforeCreate、created、beforeMount
 子:beforeCreate、created、beforeMount、mounted
 父:mounted
 更新组件时
 父beforeUpdate->子beforeUpdate->子updated->父updated
 销毁组件时
 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

加入keep-alive会触发哪些生命周期?

 会额外产生两个生命周期activated、deactivated
 如果是第一次进入会触发5个生命周期beforeCreate、created、beforeMount、mounted、activated
 第二次以后只会触发activated