其它的 lifecycle 或 vue router 的 hook

在 About 刷新一次页面

还有一些用在我也不太常用的 lifecycle 这次就一起 Demo 一下顺序

两个 component 切换

从 About 切到 Home

隐葳的 lifecycle

keep-alive: activated/deactivated

这是一个原本用在 dynamic component 的 lifecycle，为了在常切换 component 的情境之下，不要重复的销毁又重新建立 component。

keep-alive, API — Vue.js

因为有它保持让 component 一直存在，所以，不再触发 created 和 destoryed 那麽在上面的初始与释放资源的行为怎麽办？就不会有任何机会再触发了？

<keep-alive>
  <component :is="view"></component>
</keep-alive>

在我的例子上，要将 keep-alive 加在 router-view 上面

router-view, API Reference | Vue Router

<keep-alive>
  <router-view />
</keep-alive>

加上两个 life cycle

{
  // ...
  destroyed() {
    console.warn('[component About] destroyed', this.user)
  },
  activated() {
    console.warn('[component About] activated', this.user)
  },
  deactivated() {
    console.warn('[component About] deactivated', this.user)
  }
}

刷新页面，进入 Home

切换到 About

切回 Home

可以发现 About 的 beforeRouteLeave 之後就看不到 Home 的 lifecycle 了。

created、mounted 和 destoryed 都没有出现了

切回 About

等到渲染完毕，才执行的 $nextTick

vm.$nextTick( [callback] ), API — Vue.js

用「等 DOM 更新好之後，再执行的时候」通常在这个时候如果有一些 jQuery 套件会需要执行 document.querySelector 就要在这个时候执行。

通常会在 mounted 时才注册 nextTick 的 callback

export default {
  // ...
  mounted() {
    this.$nextTick(function () {
      // DOM is now updated
      // `this` is bound to the current instance
      this.doSomething()
    }
  }
}