What should I do if uniapp data is updated but the page is not rendered?

With the rapid development of the mobile Internet, mobile applications are becoming more and more popular. Many companies and developers choose to use cross-platform development tools to develop mobile applications. As one of the most popular cross-platform mobile application development frameworks, Uniapp is widely favored by developers because of its advantages of writing code once and running on multiple platforms. However, sometimes when we use Uniapp for development, we will encounter data updates but no page rendering. So, how do we solve this problem?

First of all, we need to understand the cause of this problem. Generally speaking, the problem of data updating but not rendering the page is caused by the fact that the Vue component does not automatically re-render after the data is updated. This is because Vue's responsive system is implemented by hijacking the get and set of Object.defineProperty() on the data object. When the properties in the data object change, the system will automatically detect and refresh the page. However, when the data is updated not through the methods provided by Vue, such as directly modifying the data through JavaScript objects, or manipulating data through other libraries such as jQuery, Vue's responsive system cannot automatically detect data changes, thus It is impossible to refresh the page in time.

There are many ways to solve this problem. I will introduce several commonly used methods below.

Method 1: $forceUpdate

First, Vue provides a $forceUpdate method to force the component to re-render. When we find that a component is not updated in time, we can manually call the $forceUpdate method where it needs to be updated to force the component to re-render. The specific usage methods are as follows:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    updateMessage() {
      // 通过其他方式更新数据
      this.message = 'Hello Uniapp!'
      // 调用$forceUpdate方法强制重新渲染组件
      this.$forceUpdate()
    }
  }
}
</script>

Method 2: Vue.set and Vue.delete

In addition, Vue also provides Vue.set and Vue.delete methods to update data. Among them, Vue.set is used to add a new attribute or element in an object or array, and Vue.delete is used to delete an attribute or element in an object or array. These two methods will trigger Vue's responsive system, allowing Vue to automatically detect data changes and re-render the page. The specific usage is as follows:

<template>
  <div>{{ list }}</div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    addItem() {
      Vue.set(this.list, 3, 'item4')
      // 等同于 this.list.splice(3, 0, 'item4')
    },
    removeItem() {
      Vue.delete(this.list, 1)
      // 等同于 this.list.splice(1, 1)
    }
  }
}
</script>

Method 3: watch to monitor data changes

Finally, we can also monitor data changes through watch and manually trigger the re-rendering of the component when the data changes. The specific usage methods are as follows:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  watch: {
    message(newVal, oldVal) {
      // 数据变化时手动重新渲染组件
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    }
  },
  mounted() {
    // 通过其他方式更新数据
    this.message = 'Hello Uniapp!'
  }
}
</script>

Summary:

The above are several methods to solve the problem of uniapp data update but no page rendering. Among them, $forceUpdate is relatively simple and only needs to be manually called where it needs to be updated; while Vue.set and Vue.delete are more flexible and can implement fine data operations and automatically trigger the re-rendering of components; watch is A universal means of monitoring data changes, manually triggering component re-rendering when data changes. Only by choosing appropriate methods to solve problems based on actual needs can you better improve development efficiency and avoid unnecessary problems.

The above is the detailed content of What should I do if uniapp data is updated but the page is not rendered?. For more information, please follow other related articles on the PHP Chinese website!