大家中秋假期快樂，假期分享一些實戰文章給大家，原創不易，歡迎轉發，一起學習

現在大家基本都在單頁應用裡面使用了 keep-alive 來快取不活動的元件例項，而不是銷燬它們。

用法很簡單：主要是包裹

<keep-alive>
  ...
</keep-alive>

使用場景：

和單頁應用環境配合使用的：

<keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

有以下幾個常識，如果你還沒有使用 keep-alive 的話，可以記下來：

1、元件內的第一次的生命週期：

mounted ==> activated

2、切換路由再次進來只會觸發 activated

3、可以通過 router 的鉤子函式 beforeRouteEnter 來做一些輔助判斷

不能獲取元件例項 this

比如你要設定 data 裡面的變數，抱歉，這裡操作不了，那如何做呢？

很多熟悉的人會想到 next 操作 vm 物件：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問元件例項
  })
}

是的，這裡你可以通過 from.name 來做一些判斷，比如如下程式碼片段：

需求很簡單，判斷一下從特定路由切換過來，做一個判斷賦值給 data 的 isFromTester

beforeRouteEnter (to, from, next) {
  console.log(to, from);
  if (from.name == 'Tester') {
    next(vm => {
      vm.isFromTester = true
    })
  } else {
    next(vm => {
      vm.isFromTester = false
    })
  }
}

然後你就可以在 activated 生命週期直接判斷啦

activated () {
  if (this.isFromTester) {
    //...
  }
}
 

大功告成啦

抱歉，這裡的 activated 不會那麼及時地更新 isFromTester，所以第一次你獲取的不是 true，第二次是可以的

那我們就要來刨根問底了，到底為啥不是及時更新的呢？

有沒有人想到了 vue 裡面一個很常見的 nextTick 這個東西？

是滴，就是它，它騙了 activated，真相在這裡：（我們省去了很多路由事件裡面自己的處理邏輯和 vue activated 的 hook 的觸發）