Uniapp Page Re-rendering Methods

In Uniapp, you can achieve re-rendering the page in several ways.

1. Refresh the component’s state.

this.$forceUpdate();

1. conditional rendering in VueJS

<template>
  <div>
    <ChildComponent v-if="showComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: true
    }
  },
  methods: {
    reRenderPage() {
      this.showComponent = false;
      this.$nextTick(() => {
        this.showComponent = true;
      });
    }
  }
}
</script>

1. essential

<template>
  <div>
    <ChildComponent :key="componentKey" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    reRenderPage() {
      this.componentKey++;
    }
  }
}
</script>

Here are some commonly used methods for re-rendering pages, developers can choose the appropriate method based on specific needs in practical development.