但是当我们使用 <keep-alive> 的时候，我们的 beforeDestroy 钩子函数就会失效，导致我们第三步的全局事件的解绑就不能执行了，原因是我们的组件是被缓存起来，并没有被销毁。自然会失效，但是我们并不慌，当我们使用 <keep-alive> 时，activated 和 deactivated 两个钩子函数被触发。
activated：keep-alive 组件激活时调用。
deactivated：keep-alive 组件停用时调用。
所以我们不难发现，我们完全可以使用这两个钩子去实现我们全局事件的绑定与解绑，简直完美。
activated() { document.addEventListener("click", this.isSearchCityNode); }, deactivated() { document.removeEventListener("click", this.isSearchCityNode); }
总结
通过一个城市列表组件的案例，介绍了我们在 Vue 中如何绑定全局事件以及进行优化，一定要记住事件的绑定与解除哪里有一个大坑。
我们通过 <keep-alive> 可以创建一个可以缓存的组件，而且会新增两个钩子函数提供我们使用