Que dois-je faire si les données Uniapp sont mises à jour mais que la page n'est pas affichée ?

Avec le développement rapide de l'Internet mobile, les applications mobiles deviennent de plus en plus populaires. De nombreuses entreprises et développeurs choisissent d'utiliser des outils de développement multiplateformes pour développer des applications mobiles. En tant que l'un des frameworks de développement d'applications mobiles multiplateformes les plus populaires, Uniapp est largement favorisé par les développeurs en raison de ses avantages d'écrire du code une seule fois et de l'exécuter sur plusieurs plates-formes. Cependant, parfois, lorsque nous utilisons Uniapp pour le développement, nous rencontrons des mises à jour de données mais pas de rendu de page. Alors, comment résoudre ce problème ?

Tout d’abord, nous devons comprendre la cause de ce problème. D'une manière générale, le problème de la mise à jour des données mais pas du rendu de la page est dû au fait que le composant Vue ne restitue pas automatiquement une fois les données mises à jour. En effet, le système réactif de Vue est implémenté en détournant le get et l'ensemble de Object.defineProperty() sur l'objet de données. Lorsque les propriétés de l'objet de données changent, le système détecte et actualise automatiquement la page. Cependant, lorsque les données ne sont pas mises à jour via les méthodes fournies par Vue, comme la modification directe des données via des objets JavaScript ou la manipulation des données via d'autres bibliothèques telles que jQuery, le système réactif de Vue ne peut pas détecter automatiquement les modifications des données, il est donc impossible d'actualiser. la page dans le temps.

Il existe de nombreuses façons de résoudre ce problème. Je présenterai ci-dessous quelques méthodes courantes.

Méthode 1 : $forceUpdate

Tout d'abord, Vue fournit une méthode $forceUpdate pour forcer le rendu du composant. Lorsque nous constatons qu'un composant n'est pas mis à jour à temps, nous pouvons appeler manuellement la méthode $forceUpdate où il doit être mis à jour pour forcer le rendu du composant. Les méthodes d'utilisation spécifiques sont les suivantes :

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

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

Méthode 2 : Vue.set et Vue.delete

De plus, Vue fournit également les méthodes Vue.set et Vue.delete pour mettre à jour les données. Parmi eux, Vue.set est utilisé pour ajouter un nouvel attribut ou élément à un objet ou un tableau, et Vue.delete est utilisé pour supprimer un attribut ou un élément dans un objet ou un tableau. Ces deux méthodes déclencheront le système réactif de Vue, permettant à Vue de détecter automatiquement les modifications de données et de restituer la page. L'utilisation spécifique est la suivante :

<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>

Méthode 3 : watch pour surveiller les modifications des données

Enfin, nous pouvons également utiliser watch pour surveiller les modifications des données et déclencher manuellement le nouveau rendu du composant lorsque les données changent. L'utilisation spécifique est la suivante :

<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>

Résumé :

Il existe plusieurs méthodes ci-dessus pour résoudre le problème de la mise à jour des données Uniapp mais pas de rendu de page. Parmi eux, $forceUpdate est relativement simple et ne doit être appelé manuellement que là où il doit être mis à jour ; tandis que Vue.set et Vue.delete sont plus flexibles et peuvent implémenter des opérations de données fines et déclencher automatiquement le nouveau rendu des composants ; est un moyen universel de surveiller les modifications des données, déclenchant manuellement le nouveau rendu des composants lorsque les données changent. Ce n'est qu'en choisissant des méthodes appropriées pour résoudre les problèmes en fonction des besoins réels que vous pourrez mieux améliorer l'efficacité du développement et éviter les problèmes inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!