vue3のref、isRef、toRef、toRefs、toRawの使い方

1. ref

ref 属性は、要素の取得に加えて、ref 関数を使用して応答性の高いデータを作成することもできます。データ値が変更されると、ビューが自動的に更新されます。

<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

変数が ref でラップされたオブジェクトかどうかを確認し、そうであれば true を返し、それ以外の場合は false を返します。

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

値が別のオブジェクトのプロパティを指す ref オブジェクトを作成します。

toRef(obj, key) オブジェクト内の値を応答データに変換します。これは 2 つの状況に分けられます。

• toRef は元の非応答データを定義します。が変更されると、元のデータとコピーされたデータの両方が変更されますが、ビューは更新されません。

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

注: 値を変更するために DOM がマウントされる前に chang メソッドが呼び出された場合、データとビューの両方が変更されます。

• toRef はオリジナルデータ対応データを定義しており、値を変更するとオリジナルデータとコピーデータが変更され、ビューも更新されます。

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

最終的な値は「John Doe」です。

4. toRefs

toRefs は、ref と reactive でラップされたレスポンシブ データを分解するために使用されます。オブジェクトをパラメータとして受け取り、オブジェクトのすべてのプロパティを走査し、オブジェクトのすべてのプロパティを応答データに変換します。

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 データを分解するときに、一部のパラメータがオプションのパラメータとして使用されている場合、オプションのパラメータが存在しない場合は次のようなエラーが報告されます。この問題を解決するには、toRef を使用します。toRef がオブジェクトの属性を分解するとき、まず属性がオブジェクトに存在するかどうかを確認します。存在する場合は、オブジェクトの属性値を継承します。存在しない場合は、属性値を作成します。 。

上記のコードを次のように変更します:

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

5.toRaw

応答オブジェクトを元のオブジェクトに変換します。監視されたくないことを行う、ref または reactive から生データを取得する。

元のレスポンシブ データを変更すると、toRaw で変換されたデータも変更され、次のようにビューも更新されます。

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

toRaw で取得した元のデータが変更された場合、元のデータも変更されますが、ビューは更新されません。例:

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

以上がvue3のref、isRef、toRef、toRefs、toRawの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。