Comment utiliser les références, isRef, toRef, toRefs et toRaw de vue3

1. En plus d'obtenir des éléments, l'attribut ref peut également utiliser la fonction ref pour créer des données réactives. Lorsque la valeur des données change, la vue est automatiquement mise à jour.

<script lang="ts" setup>
import { ref } from &#39;vue&#39;
let str: string = ref(&#39;我是张三&#39;)
const chang = () => {
  str.value = &#39;我是钻石王老五&#39;
  console.log(str.value)
}
</script>
<template>
  <div>
    {{ str }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

2. isRef

vérifie si la variable est un objet enveloppé par ref, si c'est le cas, elle renvoie vrai, sinon elle renvoie faux.

import { ref, isRef, reactive } from 'vue'

let str: string = ref('我是张三')
let num: number = 1
let per = reactive({ name: '代码女神', work: '程序媛' })

console.log('strRes', isRef(str)) //true
console.log('numRes', isRef(num)) //false
console.log('perRes', isRef(per)) //false

3. toRef

Créez un objet ref dont la valeur pointe vers une propriété dans un autre objet.

toRef(obj, key) convertit une valeur de l'objet en données réactives, qui sont divisées en deux situations :

toRef définit les données originales non réactives. Lorsque la valeur est modifiée, à la fois les données originales et les données. les données copiées changeront, mais la vue ne sera pas mise à jour.

• <script>
    import { ref, isRef, toRef, reactive } from &#39;vue&#39;
  let obj = {
    name: &#39;姓名&#39;,
    age: 18,
  }
  let name: string = toRef(obj, &#39;name&#39;)
  const chang = () => {
    obj.name = &#39;钻石王老五&#39;
    name.value = &#39;李四&#39;
    console.log(obj.name) // 李四
    console.log(&#39;name&#39;, name) // 李四
  }
  //chang() //DOM挂载前调用
  </script>
  <template>
    <div>
      {{ obj.name }} ------- {{ name }}
      <button type="button" @click="chang">修改值</button>
    </div>
  </template>

  Copier après la connexion
Remarque : Si la méthode chang est appelée avant que le DOM ne soit monté pour modifier la valeur, les données et la vue changeront.

toRef définit les données sensibles aux données d'origine. Lorsque la valeur est modifiée, les données d'origine et les données de copie changeront et la vue sera également mise à jour.

• <script>
    import { ref, isRef, toRef, reactive } from &#39;vue&#39;
  let obj = reactive({
    name: &#39;姓名&#39;,
    age: 18,
  })
  let name: string = toRef(obj, &#39;name&#39;)
  const chang = () => {
    obj.name = &#39;钻石王老五&#39;
    name.value = &#39;李四&#39;
  }
  </script>
  <template>
    <div>
      {{ obj.name }} ------- {{ name }}
      <button type="button" @click="chang">修改值</button>
    </div>
  </template>

  Copier après la connexion
La valeur finale est "John Doe".

4. toRefs

toRefs est utilisé pour déconstruire les données réactives enveloppées par ref et réactive. Reçoit un objet en tant que paramètre, parcourt toutes les propriétés de l'objet et transforme toutes les propriétés de l'objet en données réactives.

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
}
</script>
<template>
  <div>
    {{ name }} ------- {{ age }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

toRefs Lors de la déconstruction des données, si certains paramètres sont utilisés comme paramètres facultatifs, une erreur sera signalée lorsque les paramètres facultatifs n'existent pas, tels que :

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

Vous pouvez utiliser toRef pour résoudre ce problème lorsque vous utilisez toRef pour déconstruire. un attribut de l'objet, vérifiez d'abord si l'attribut existe sur l'objet. S'il existe, héritez de la valeur de l'attribut sur l'objet. S'il n'existe pas, il en créera un.

Modifiez le code ci-dessus en :

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

5. toRaw

Convertissez l'objet réactif en objet d'origine. Faites quelque chose que vous ne voulez pas être surveillé, obtenez des données brutes de référence ou réactives.

Lors de la modification des données réactives d'origine, les données converties par toRaw seront modifiées, et la vue sera également mise à jour, comme :

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from &#39;vue&#39;
let obj = reactive({
  name: &#39;姓名&#39;,
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = &#39;钻石王老五&#39;
  obj.age++
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
  </div>
</template>

Si les données d'origine obtenues par toRaw sont modifiées, les données d'origine seront également modifiées, mais la vue ne sera pas mise à jour. Tel que :

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from &#39;vue&#39;
let obj = reactive({
  name: &#39;姓名&#39;,
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = &#39;钻石王老五&#39;
  obj.age++
}
const changNew = () => {
  newObj.name = &#39;搞笑&#39;
  console.log(&#39;newObj&#39;, newObj)
  console.log(&#39;obj&#39;, obj)
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
    <button @click="changNew">修改</button>
  </div>
</template>

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!