So verwenden Sie vue3s ref, isRef, toRef, toRefs und toRaw

1, ref

Zusätzlich zum Abrufen von Elementen kann das Ref-Attribut auch die Ref-Funktion verwenden, um reaktionsfähige Daten zu erstellen. Wenn sich der Datenwert ändert, wird die Ansicht automatisch aktualisiert.

<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

Überprüfen Sie, ob die Variable ein von ref umschlossenes Objekt ist. Wenn ja, geben Sie true zurück, andernfalls geben Sie false zurück.

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

Erstellen Sie ein Referenzobjekt, dessen Wert auf eine Eigenschaft in einem anderen Objekt verweist.

toRef(obj, key) Konvertieren Sie einen Wert im Objekt in reaktionsfähige Daten, unterteilt in zwei Situationen:

• toRef Definieren Sie das ursprüngliche Nicht- Responsive Daten Wenn der Wert geändert wird, ändern sich sowohl die Originaldaten als auch die kopierten Daten, die Ansicht wird jedoch nicht aktualisiert.

<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>

Hinweis: Wenn die Chang-Methode aufgerufen wird, bevor das DOM gemountet wird, um den Wert zu ändern, ändern sich sowohl die Daten als auch die Ansicht.

• toRef definiert auf Originaldaten reagierende Daten. Wenn der Wert geändert wird, ändern sich die Originaldaten und Kopierdaten und die Ansicht wird ebenfalls aktualisiert.

<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>

Der Endwert ist „John Doe“.

4, toRefs

toRefs wird verwendet, um die von ref und reactive umschlossenen Reaktionsdaten zu dekonstruieren. Empfangen Sie ein Objekt als Parameter, durchlaufen Sie alle Eigenschaften des Objekts und wandeln Sie alle Eigenschaften des Objekts in reaktionsfähige Daten um.

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 Wenn beim Dekonstruieren von Daten einige Parameter als optionale Parameter verwendet werden, wird ein Fehler gemeldet, wenn die optionalen Parameter nicht vorhanden sind, z. B.:

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 = '程序媛'
}

Sie können Verwenden Sie toRef, um dieses Problem zu lösen. Wenn Sie toRef verwenden, um ein Attribut eines Objekts zu dekonstruieren, prüfen Sie zunächst, ob das Attribut auf dem Objekt vorhanden ist. Wenn es vorhanden ist, erben Sie den Attributwert auf dem Objekt werde eins erstellen.

Ändern Sie den obigen Code wie folgt:

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

Konvertieren Sie das responsive Objekt in das Originalobjekt. Tun Sie etwas, von dem Sie nicht möchten, dass es überwacht wird, und holen Sie sich Rohdaten von Ref oder Reactive.

Beim Ändern der ursprünglichen Reaktionsdaten werden die von toRaw konvertierten Daten geändert und die Ansicht wird ebenfalls aktualisiert, z. B.:

<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>

Wenn die Originaldaten von erhalten wurden toRaw wird geändert, die Originaldaten werden ebenfalls geändert, die Ansicht wird jedoch nicht aktualisiert. Zum Beispiel:

<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>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue3s ref, isRef, toRef, toRefs und toRaw. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!