vue3의 ref, isRef, toRef, toRefs 및 toRaw를 사용하는 방법-View.js-php.cn

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

WBOY

풀어 주다： 2023-05-10 20:37:04

앞으로

1650명이 탐색했습니다.

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 &#39;vue&#39;

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

console.log(&#39;strRes&#39;, isRef(str)) //true
console.log(&#39;numRes&#39;, isRef(num)) //false
console.log(&#39;perRes&#39;, isRef(per)) //false

로그인 후 복사

3. toRef

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

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

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

로그인 후 복사

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

로그인 후 복사

4. toRefs

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

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

로그인 후 복사

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

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

로그인 후 복사

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

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

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

로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!