vue3의 ref, isRef, toRef, toRefs 및 toRaw를 사용하는 방법

1. 요소를 얻는 것 외에도 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

값이 다른 객체의 속성을 가리키는 참조 객체를 만듭니다.

toRef(obj, key)는 객체의 값을 반응형 데이터로 변환하며 이는 두 가지 상황으로 나뉩니다.

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와 반응성으로 래핑된 반응형 데이터를 분해하는 데 사용됩니다. 객체를 매개변수로 받고, 객체의 모든 속성을 탐색하고, 객체의 모든 속성을 반응형 데이터로 변환합니다.

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 데이터를 분해할 때 일부 매개변수가 선택적 매개변수로 사용되면 다음과 같은 선택적 매개변수가 없으면 오류가 보고됩니다.

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

toRef를 사용하여 분해할 때 이 문제를 해결할 수 있습니다. 객체의 속성, 먼저 객체에 속성이 있는지 확인하고, 존재하지 않으면 속성 값을 상속합니다.

위 코드를 다음과 같이 수정합니다.

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

반응형 개체를 원본 개체로 변환합니다. 모니터링하고 싶지 않은 작업을 수행하고 참조 또는 반응에서 원시 데이터를 가져옵니다.

원본 반응형 데이터를 수정하면 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>

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

위 내용은 vue3의 ref, isRef, toRef, toRefs 및 toRaw를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!