UniAPP hidden page will be refreshed

UniAPP is a cross-platform application development framework that can develop an application on multiple platforms, including Android, iOS and Web platforms. However, some developers will encounter a problem, that is, when the page is hidden, the page will automatically refresh. Why is this?

UniAPP is a framework based on Vue.js. In Vue.js, when a component is hidden, it is not destroyed, but is cached so that it can be used directly the next time it is needed. This mechanism also exists in UniAPP, so when the page is hidden, the page is not destroyed, but cached.

The advantage of this mechanism is that it can improve the performance of the application because there is no need to recreate the component every time. However, there is also a drawback, that is, when the page is cached, its data is also cached. This will cause the previously cached data to be used when the page is displayed again, rather than re-fetching the data.

So how to solve this problem? It's actually very simple, you just need to manually clear the cache when hiding the page. In UniAPP, this can be achieved by monitoring the page life cycle.

In the life cycle of the page, there are two methods that can be used to clear the cache, namely onHide and onUnload. When the page is hidden, the onHide method will be triggered, and when the page is destroyed, the onUnload method will be triggered. Therefore, just add the code to clear the cache in these two methods.

The specific implementation method is as follows:

1. Add the following code in the script tag of the page:

export default {
  methods: {
    clearCache() {
      // 清除缓存代码
    }
  },
  onHide() {
    this.clearCache();
  },
  onUnload() {
    this.clearCache();
  }
}

2. Add clear cache in the clearCache method code. It needs to be implemented according to specific business logic, which can be operations such as clearing data or re-obtaining data.

For example, if you are re-obtaining data, the code can be as follows:

clearCache() {
  // 发送请求，重新获取数据
  uni.request({
    url: 'https://example.com/data',
    success: res => {
      // 处理获取到的数据
    }
  });
}

In this way, every time the page is hidden or destroyed, the data will be re-obtained, avoiding the use of cache Problems caused by data.

To summarize, UniAPP will automatically cache the page when it is hidden, and it will also cache the page data while caching. This can cause problems when using cached data. To solve this problem, you can manually clear the cache during the page's life cycle. This is achieved by adding the clearCache method in the onHide and onUnload methods. This avoids data issues when hiding pages.

The above is the detailed content of UniAPP hidden page will be refreshed. For more information, please follow other related articles on the PHP Chinese website!