记录使用Vue相关API开发项目时遇到的问题难点整理（不定时更新）

本文为整理记录本人从18年初开始上手使用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来实现效果了。