Vue toRefs : Déstructurer les propriétés sans perdre en réactivité dans Vue
Annuaire d'articles
Dans le développement de Vue, nous transmettons souvent des données entre les composants. À cette époque, Props jouait un rôle clé. Cependant, lorsque vous essayez de déstructurer des accessoires, vous pouvez rencontrer un problème : les données des accessoires peuvent perdre en réactivité. Cet article présentera un moyen de le garder réactif.
Qu'est-ce qui est réactif ?
Dans Vue, la réactivité est un mécanisme qui permet aux modifications des données d'être automatiquement mises à jour dans l'interface. Si une donnée est réactive, lorsqu'elle change, toutes les parties qui en dépendent seront mises à jour automatiquement.
Le défi de la déconstruction des accessoires
Dans Vue, les accessoires permettent aux composants parents de transmettre des données aux composants enfants. Ces données peuvent être utilisées à l'intérieur des sous-composants grâce à la déconstruction. Cependant, lorsque vous essayez de déstructurer directement l’objet props, les propriétés déstructurées peuvent ne plus répondre.
Utiliser toRefsle réactif
Heureusement, Vue fournit une toRefsméthode qui déconstruit l'objet props en un ensemble de références réactives. De cette façon, même après déstructuration, ces propriétés restent réactives.
Voici un exemple:
<script setup lang="ts">
// 从 Vue 框架中导入 toRefs 函数
import {
toRefs } from 'vue'
// 使用 defineProps 来定义组件的 props，这里定义了两个属性：event（一个对象）和 address（一个字符串）
const props = defineProps<{
event: object;
address: string;
}>();
// 使用 toRefs 函数将 props 对象转换为响应式引用对象
// 这样可以保持 props 中的属性在解构时的响应式
// 这里我们解构出了 address 属性
const {
address } = toRefs(props)
</script>
<template>
<!-- 在模板中使用 address 属性，Vue 会自动跟踪 address 的变化，并更新视图 -->
<div>{
{
address }}</div>
</template>
Dans le code ci-dessus, nous avons utilisé toRefsla méthode pour déstructurer l'objet props et l'attribuer à une variable locale. De cette façon, addressla variable peut être utilisée dans le modèle, et lorsque addressl'attribut dans props change, la valeur dans le modèle sera automatiquement mise à jour.
en conclusion
La déstructuration est une opération courante en programmation, mais la déstructuration directe des accessoires dans Vue peut entraîner une perte de réactivité. En utilisant toRefsles méthodes de Vue, nous pouvons facilement déstructurer les accessoires tout en conservant la réactivité des propriétés déstructurées.
Que vous soyez un débutant Vue ou un développeur expérimenté, maîtriser cette technique vous aidera à écrire du code plus flexible et plus efficace. J'espère que cet article vous a aidé à comprendre comment déstructurer les propriétés dans Vue sans perdre en réactivité.