在vue中监听window事件

今天有需求是当PC用户在完成第三方支付之后，又在浏览器切换回我自己页面时，需要捕获用户回到页面的事件，进而自动刷新页面。

思考过后发现使用 window.onfocus 可以达到这个需求。只是不知道 vue 的是如何监听 window 事件的。

一开始一直想着用 vue 的 v-on 绑定在哪里监听，但是找不到方式。后来gogole了一下发现尤大说其实直接在 ready 的时候给 window 添加事件就好了，没必要使用 v-on 或者其他 vue 的方法。

大概的代码如下

// pay.vue
methods: {
  handleWinFocus() {
    alert('you are in page now');
  },
},
ready() {
  window.addEventListener('focus', this.handleWinFocus);
},
beforeDestroy() {
  window.removeEventListener('focus', this.handleWinFocus);
},

值得注意的是一开始没有在 beforeDestroy 的时候解除事件绑定。就会发现跳出 pay 页面之后再回来，然后切换标签页，会打印两次信息。是因为事件一直存在在页面中，而单页面应用没有刷新，也就不会自己解绑，因而绑定了两次事件。所以要在 beforeDestroy 里面手动解绑。