不要通过console.log( this )去输出引用值,console.log并非JavaScript正式部分,是由宿主环境添加进去,不同环境有不同实现。在chrome浏览器打印的是对象当时的快照信息,当展开对象时候,会去内存读对象的属性值。所以可能会造成一种错觉。必要时使用打断点或debugger、序列化为字符串输出查看最新状态。
- 导航被触发
- 调用 失活 组件守卫:beforeRouteLeave
- 调用 失活 组件:deactivated(keep-alive下才有)
- 调用全局守卫:beforeEach
- 调用 重用 组件守卫:beforeRouteUpdate
- 调用路由守卫:beforeEnter
- 解析异步路由组件
- 调用 激活 组件守卫:beforeRouteEnter
- 调用全局守卫:beforeResolve
- 导航被确认
- 调用全局守卫:afterEach
- 触发DOM更新(以下顺序成立前提:子组件没有通过v-if状态false变为true)
(-------同步加载子组件,即import Test from “./components/Test.vue”-------)- 父组件: beforeCreate
- 父组件: created
- 父组件: beforeMount
- 子组件: beforeCreate
- 子组件: created
- 子组件: beforeMount
- 父组件前置守卫回调函数:beforeRouteEnter next
- 失活父组件: beforeDestroy
- 失活子组件: beforeDestroy
- 失活子组件: destroyed
- 失活父组件: destroyed
- 子组件: mounted
- 父组件: mounted
- 父组件: activated(keep-alive下才有)
以上是自己实践过得出(其中beforeDestroy和destroyed在beforeRouteEnter next前还是后,没确定),方便之后忘记回过来复习的。