本文為整理記錄本人從17年初開始上手使用Vue以後，針對專案中業務需求所遇到到的各種問題及難點的解決方法整理?。

1、keep-alive元件快取：

 <!--這裡是需要快取的-->
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!--這裡不會被快取的-->
<router-view v-if="!$route.meta.keepAlive"></router-view>

keep-alive快取元件有兩個生命週期鉤子函式：activated（元件啟用時呼叫）、deactivated（元件停用時呼叫），對應created、destroyed。針對業務上的一些全域性公共元件，比如在一個被快取的元件引入此公共元件，同時要綁定了一個事件，

mounted() {
    this.$nextTick(() => {
        window.addEventListener('click', function, false);
    })
},

那麼退出元件時要登出該事件，

destroyed: function() {
    window.removeEventListener('click', function, false);//離開的時候登出事件
},

同時也要在deactivated裡執行一次登出事件，因為被快取的元件不會被銷燬。

2、Vue構建的單頁應用，假設情景是從列表頁跳轉到詳情頁，如果業務要求必須開啟新視窗，即用target="_blank"。此時如果兩個視窗頁面之間都有用到vuex state資料的話，比如共享同一個id陣列，那麼列表頁修改了state資料後，詳情頁就不能實時更新state資料。此時只能使用localStorage來實現效果了。