Comment utiliser ref et réactif dans vue3

1. ref

ref est une fonction dans Vue3, qui peut convertir une variable ordinaire en une variable réactive strong> . Lors de l'utilisation de ref, nous devons transmettre une valeur initiale, et ref renverra un objet contenant cette valeur initiale. ref 是 Vue3 中的一个函数，它可以将一个普通的变量转化为一个响应式变量。使用 ref 的时候，我们需要传入一个初始值，ref 会返回一个包含了这个初始值的对象。

使用 ref 的语法如下所示：

import { ref } from 'vue';
const count = ref(0);

在上面的代码中，我们创建了一个名为 count 的变量，它的初始值为 0。通过调用 ref 函数，我们将 count 变量转化为了一个 ref 对象。在组件中使用 count 的时候，我们需要通过 .value 来访问它的值,且ref.value = 可以修改它的值。但是当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。：

------------------

注意：在标签中使用无需加.value，在函数中使用必须要加.value

除此之外，ref 还可以用来监听 DOM 元素的变化：

<template>
  <div ref="myDiv">这是一个 DOM 元素</div>
</template>

<script>
  import { ref, onMounted } from &#39;vue&#39;;

  export default {
    setup() {
      const myDiv = ref(null);

      onMounted(() => {
        console.log(myDiv.value.innerHTML);
      });

      return {
        myDiv,
      };
    },
  };
</script>

在上面的代码中，我们创建了一个名为 myDiv 的 ref 对象，并将它赋值给了一个 div 元素。在组件的 setup 函数中，我们使用了 onMounted 钩子函数，在组件渲染完成之后，打印出了 myDiv 元素的 innerHTML。

二、reactive

reactive 是 Vue3 中的另一个 API，它可以将一个普通的对象转化为一个响应式对象。与 ref 不同的是，reactive 返回的是一个响应式的对象，而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。

使用 reactive 的语法如下所示：

import { reactive } from 'vue';
const state = reactive({
  count: 0,
});

在上面的代码中，我们创建了一个名为 state 的响应式对象，它包含了一个名为 count 的属性，初始值为 0。

在组件中使用 state 的时候，我们可以像访问普通对象的属性一样访问它的属性：

<template>
  <div>{{ state.count }}</div>
</template>

除了访问属性之外，reactive 也可以对普通 JavaScript 对象或数组进行响应式处理，可以通过 reactive 将一个普通对象转化为响应式对象，从而实现对整个对象的响应式追踪，例如：

const obj = { a: 1, b: 2 };
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.a = 3;
console.log(obj.a); // 输出 3

reactive 还可以在嵌套对象和数组中创建响应式对象，例如：

const obj = { 
  a: 1, 
  b: { c: 2 }，
  d: [1, 2, 3]
};
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.b.c = 3;
reactiveObj.d.push(4);

reactive 还支持在嵌套对象中使用 toRefs 将响应式对象的属性转换为响应式引用，方便在模板中使用。例如：

const obj = reactive({ a: 1, b: { c: 2 } });
const { b } = toRefs(obj);

// 模板中使用
<template>
  <div>{{ b.c }}</div>
</template>

总之，reactive 除了访问属性之外还能处理整个对象或数组的响应式追踪，以及支持在嵌套对象中使用 toRefs 方便在模板中使用。

三、ref和reactive的使用对比

1.ref的使用方法

ref创建的变量可以通过.value来获取和修改其值。例如：

import { ref } from 'vue'

// 创建ref
const count = ref(0)

// 获取ref的值
console.log(count.value) // 输出 0

// 修改ref的值
count.value = 1
console.log(count.value) // 输出 1

2. reactive的使用方法

reactive

La syntaxe d'utilisation de ref est la suivante : 🎜

import { reactive } from 'vue'

// 创建reactive对象
const obj = reactive({
  count: 0
})

// 获取reactive对象的属性值
console.log(obj.count) // 输出 0

// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1

🎜Dans le code ci-dessus, nous avons créé une variable nommée count avec une valeur initiale de 0. En appelant la fonction ref, nous convertissons la variable count en un objet ref. Lors de l'utilisation de count dans un composant, nous devons accéder à sa valeur via .value, et ref.value = peut modifier sa valeur. Mais lorsque ref est accédé en tant que propriétés de niveau supérieur dans les modèles, elles sont automatiquement "déballées", il n'est donc pas nécessaire d'utiliser .value. ：🎜rrreee🎜Remarque : il n'est pas nécessaire d'ajouter .value lorsqu'il est utilisé dans des balises, mais .value doit être ajouté lorsqu'il est utilisé dans des fonctions🎜🎜De plus, ref peut également être utilisé pour surveiller les modifications dans les éléments DOM : 🎜rrreee🎜Dans le code ci-dessus, nous créons un objet <code>ref nommé myDiv et l'ajoutons. à un élément div. Dans la fonction setup du composant, nous utilisons la fonction hook onMounted Une fois le rendu du composant terminé, le du <code>myDiv. l'élément est imprimé. innerHTML. 🎜🎜2. reactive🎜🎜reactive est une autre API de Vue3, qui peut convertir un objet normal en un objet réactif . Contrairement à ref, reactive renvoie un objet réactif plutôt qu'un objet contenant une valeur. Nous pouvons obtenir ou modifier la valeur d'un objet réactif en accédant à ses propriétés. 🎜🎜La syntaxe d'utilisation de reactive est la suivante : 🎜rrreee🎜Dans le code ci-dessus, nous créons un objet réactif nommé state, qui contient un objet nommé attribut count code>, le la valeur initiale est 0. 🎜🎜Lors de l'utilisation de <code>state dans un composant, nous pouvons accéder à ses propriétés tout comme les propriétés d'un objet normal : 🎜rrreee🎜En plus d'accéder aux propriétés, reactive peut également pour traitement réactif d'objets ou de tableaux JavaScript ordinaires, vous pouvez utiliser reactive pour convertir un objet ordinaire en objet réactif, obtenant ainsi un suivi réactif de l'objet entier, par exemple : 🎜rrreee🎜reactive peut également être utilisé dans Créez des objets réactifs dans des objets et des tableaux imbriqués, par exemple : 🎜rrreee🎜reactive prend également en charge l'utilisation de toRefs dans des objets imbriqués pour convertir les propriétés des objets réactifs en références réactives pour une utilisation facile dans les modèles. Par exemple : 🎜rrreee🎜En bref, reactive peut gérer le suivi réactif de l'ensemble de l'objet ou du tableau en plus d'accéder aux propriétés, et prend en charge l'utilisation de toRefs dans les objets imbriqués pour commodité.utilisé dans les modèles. 🎜🎜3. Comparaison de l'utilisation de ref et reactive🎜

1. Comment utiliser ref

🎜Les variables créées par ref peuvent être obtenues via .value code> Modifier sa valeur. Par exemple : 🎜rrreee<h4>2. Comment utiliser le réactif</h4>🎜<code>réactif L'objet créé doit obtenir et modifier ses valeurs d'attribut​​par affectation de déstructuration. Par exemple : 🎜rrreee

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!