前言

h5页面在公司实际生产中的应用更多的是直接嵌入到App或者小程序中等，几乎没有单独的h5的页面直接运行在浏览器上，这种方式可以降低App或者小程序的冗余程度，降低各模块之间的耦合，但这种方式也带来了一定的问题，由于h5直接嵌入App或者小程序这种方式与传统的h5直接运行在浏览器上不同，一般都是运行在webview容器中，也导致了有一些特殊的机制，该专栏就用于记录这些遇到的问题。

场景

技术栈：vue
链路：H5页面跳转->App页面->App页面对数据进行操作（比如删除数据）->返回H5页面->去重新发送请求调用列表数据。
问题：当在App页面对数据进行删除之后，返回H5页面，不会触发mounted函数，导致无法重新发送接口请求数据，数据无法刷新。
跳转H5页面表现：返回的时候，如果没有进行缓存页面的操作，则mounted钩子函数会触发，没有以上问题。

解决方法

    //监听从app页面回来时，重新请求接口
    document.addEventListener('visibilitychange', async () => {
      if (document.visibilityState == 'visible') {
      //当路由命中该页面时
        if (this.$route && this.$route.name == 'order') {
          this.fetch()
        }
      }
    })

通过监听visibilitychange事件，当页面显示的时候，就会去执行里面的操作，相当于小程序中的onshow函数，只是不同的是在首次进入页面的时候不会触发，这样子也不会发送两次请求（mounted中还会发送一次），浪费资源。

如果各位有更好的解决方法，欢迎在评论进行交流。