Explication détaillée des fonctions de l'outil réactif dans Vue3 : gestion pratique des données réactives

Les fonctions des outils réactifs introduites dans Vue 3 facilitent grandement notre gestion et notre exploitation des données réactives. Dans Vue 2, nous devons utiliser Object.defineProperty() pour définir manuellement les getters et setters, mais dans Vue 3, nous pouvons utiliser des fonctions plus simples et plus faciles à comprendre pour obtenir le même effet. Cet article présentera en détail les fonctions des outils réactifs dans Vue 3 et comment les utiliser.

1. Fonction réactive

La fonction réactive est la fonction d'outil réactif la plus basique de Vue 3. Il reçoit un objet normal et renvoie un objet proxy réactif grâce auquel nous pouvons accéder et mettre à jour les valeurs de propriété de l'objet proxy.

Utilisation :

import { reactive } from 'vue'

const obj = reactive({
  name: '张三',
  age: 26,
  job: '前端开发工程师'
})

console.log(obj.name) // 输出：张三

obj.name = '李四' // 修改值

console.log(obj.name) // 输出：李四

2. Fonction Ref

La fonction Ref est une autre fonction d'outil réactif couramment utilisée dans Vue 3. Il prend un paramètre et renvoie un objet de référence réactif, accessible et modifiable. Une utilisation importante de la fonction Ref consiste à utiliser des données réactives dans les modèles.

Utilisation :

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 输出：0

count.value++ // 修改值

console.log(count.value) // 输出：1

3. Fonction calculée

La fonction Computed est une fonction d'outil réactif dans Vue 3 pour calculer les données dérivées. Il reçoit deux paramètres, le premier est la fonction getter de l'attribut calculé et le second est les données réactives dont dépend le getter.

Utilisation :

import { reactive, computed } from 'vue'

const obj = reactive({
  name: '张三',
  age: 26,
  job: '前端开发工程师'
})

const message = computed(() => {
  return `我叫${obj.name}，今年${obj.age}岁，是个${obj.job}`
})

console.log(message.value) // 输出：我叫张三，今年26岁，是个前端开发工程师

4. Fonction de surveillance

La fonction de surveillance est une fonction d'outil réactif dans Vue 3 pour surveiller les modifications de données réactives. Il reçoit deux paramètres, le premier concerne les données réactives à surveiller et le second est la fonction de rappel.

Utilisation :

import { reactive, watch } from 'vue'

const obj = reactive({
  name: '张三',
  age: 26,
  job: '前端开发工程师'
})

watch(
  () => obj.age,
  (newVal, oldVal) => {
    console.log(`年龄从${oldVal}岁变成了${newVal}岁`)
  }
)

obj.age = 27 // 输出：年龄从26岁变成了27岁

Résumé

Les fonctions des outils réactifs dans Vue 3 simplifient grandement la gestion et le fonctionnement des données réactives, notamment Reactive , Ref, Calculé et regardé, etc. Utilisez ces fonctions pour créer facilement des données réactives et même les utiliser dans des modèles. Maîtriser l'utilisation de ces fonctions peut nous aider à mieux utiliser Vue 3 pour développer des applications réactives.

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!