Le rôle de la fonction ref dans vue3

refLes fonctions sont utilisées pour créer une seule donnée réactive.
Dans l'API Composition de Vue 3, refles fonctions peuvent être utilisées pour convertir une valeur JavaScript ordinaire en un objet réactif.

Voici refun exemple d'utilisation de la fonction :

import { ref } from 'vue';

// 创建一个普通的JavaScript值
const count = 0;

// 将值转换为具有响应式能力的对象
const reactiveCount = ref(count);

// 在模板或组件中使用响应式对象
console.log(reactiveCount.value); // 输出: 0

// 修改对象的值
reactiveCount.value += 1;

// 自动更新相关依赖
console.log(reactiveCount.value); // 输出: 1

Dans l'exemple ci-dessus, refles fonctions convertissent des valeurs JavaScript simples counten objets réactifs reactiveCount. Accès reactiveCount.valuepour lire et modifier les valeurs. Lorsque reactiveCount.valuela valeur de est modifiée, la vue qui lui est associée est automatiquement mise à jour.

Il convient de noter que lors de l'utilisation refde fonctions pour créer des données réactives, l'accès et la modification des valeurs nécessitent .valuedes attributs. En effet, refla fonction renvoie un objet wrapper, .valueune propriété de l'objet wrapper qui est utilisée pour accéder à la valeur réelle et la modifier.

De plus, refles fonctions fournissent .valued'autres méthodes que les attributs, telles que .isRef, , .unrefetc., pour manipuler et gérer les données réactives.