乐趣区

关于vue.js:Vue生态基础知识整理

vue 生命周期

  1. beforeCreate:vue 实例的挂载元素 $el 和数据对象 data 都为 undefined,还未初始化
  2. created:vue 实例的数据对象 data 有了,$el 还没有
  3. beforeMount:vue 实例的 $el 和 data 都初始化了,但还是挂载之前为虚构的 dom 节点,data.message 还未替换
  4. mounted:vue 实例挂载实现,data.message 胜利渲染
  5. beforeUpdate: 当 data 变动时,会触发 beforeUpdate
  6. updated: 从新渲染后会触发 updated
  7. beforeDestroy: 在实例销毁之前调用。在这一步,实例依然齐全可用
  8. destroyed: 在 Vue 实例销毁后调用。调用后,Vue 实例批示的所有货色都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

vue-router 的导航守卫

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创立好的组件实例会作为回调函数的参数传入。
退出移动版