Vue3 반응형 함수 비교: toRef() 대 toRefs()

ref는 기본 데이터 유형을 처리하는 반응형 API 함수입니다. setup에서 선언된 변수는 템플릿에서 직접 사용할 수 있습니다. ref是处理基本数据类型响应式API函数,在setup中声明定义的变量,可以直接在模板中使用

没有被响应式API包裹处理的变量数据,是不具备响应式能力的

也就是往往在逻辑中修改了数据,但是页面不会更新,那怎么样将一个非响应式数据变成响应式数据

就需要用到toRef()与toRefs()这两个componsition API的

单纯的去看概念,往往比较抽象,是难以理解的,还是需要从具体的实例出发

toRef()函数

作用:创建一个ref对象,其value值指向另一个对象中的某个属性值,与原对象是存在关联关系的。【相关推荐：vuejs视频教程、web前端开发】

也就是基于响应式对象上的一个属性,创建一个对应的ref,这样创建的ref与它的源属性是保持同步的,与源对象存在引用关系

改变源属性的值将更新ref的值

语法: const 变量名 = toRef(源对象,源对象下的某个属性)

如:const name = toRef(person,'name')

应用: 要将响应式对象中的某个属性单独提供给外部使用时,不想丢失响应式,把一个prop的ref传递给一个组合式函数也会很有用

缺点：toRef()只能处理一个属性,但是toRefs(源对象),却可以一次性批量处理

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});
</script>

那在模板当中想要渲染数据可以这么写

{{person.name}} -{{person.age}}-{{person.job.web}}-{{person.job.trade}}

如果不想在模板当中,写那么长,那么可以先解构,如下所示

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;
</script>

那在模板中,可以直接使用变量的,如下所示

{{name}}-{{age}}-{{web}}-{{trade}}

现在,如果我们想要去修改变量数据,会发现,逻辑中的数据会被修改,但是页面中的数据不会更新,也就是丢失了响应式 比如:如下模板,分别修改名字,年龄属性

<button @click="handleChangeAttrs">修改属性</button>

那在逻辑代码中

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;

// 这样直接操作数据是无法修改的,因为它不是一个响应式数据,只是一个纯字符串,不具备响应式
function handleChangeAttrs() {
    name = "itclanCoder";
    age = 20;
}
</script>

如果想要修改数据,支持响应式,将一个非响应式数据,变成一个响应式数据,需要借用toRef(源对象,源对象下指定的属性)函数,如下所示

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 想要修改指定哪个对象具备响应式,那么就使用toRef函数处理,toRef(源对象,源对象下的某个属性)
const name = toRef(person，&#39;name&#39;);  
const age = toRef(person,&#39;age&#39;);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

在模板当中,仍然是如上所示

{{person}}
{{name}}-{{age}}-{{web}}-{{trade}}
<button @click="handleChangeAttrs">修改属性</button>

你会发现使用toRef()函数处理后,非响应式数据就具备响应式数据的能力了的,而且源数据也会同步

如果只是用于纯数据页面的展示,那是没有必要将数据转化为响应式数据的,如果需要修改数据,那么就需要将非响应式数据转化为响应式数据

是通过toRef()函数实现的

与ref的不同

如果你用ref处理数据的话,如下所示,使用ref处理数据,页面也能实现数据的响应式,更新,但是它与toRef是不同,有区别的

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 使用ref
const name = ref(person.name);  
const age = toRef(person.age);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

修改数据,页面数据会更新,但是源数据不会同步,修改,并无引用关系,ref相当于是对源对象重新拷贝一份数据 ref()接收到的是一个纯数值

toRefs()函数

toRef()只能处理源对象指定的某个属性,如果源对象属性很多,一个一个的使用toRef()处理会显得比较麻烦

那么这个toRefs()就很有用了,它与toRef()的功能一致,可以批量创建多个ref对象,并且能与源对象保持同步,有引用关系

语法:toRefs(源对象),toRefs(person)

如上面的示例代码,修改为toRefs()所示

<script setup>
import { reactive,toRefs } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 通过toRefs()批量处理,此时通过解构
const {name,age} = toRefs(person);  

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

当从组合式函数中返回响应式对象时，toRefs 是很有用的。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性

import { toRefs } from "vue";
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 在返回时都转为ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

注意事项

toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，则改用 toRef

为啥需要toRef()与toRefs()函数

目的：在保证不丢失响应式的前提下，把对象进行解构，方便对象数据分解和扩散

前提：针对的是响应式对象（reactive封装的）非普通对象

注意：不创造响应式（那是reactive的事情),它本身只是延续响应式,让一个非响应式数据通过toRef或toRefs

변수 반응형 API로 패키징 및 처리되지 않은 데이터는 반응형 기능이 없습니다🎜🎜즉, 데이터는 로직에서 자주 수정되지만 페이지는 업데이트되지 않습니다. 비반응형 데이터를 반응형 데이터로 바꾸려면 두 개의 composition API, toRef() 및 toRefs()🎜를 사용해야 합니다. 🎜간단히 개념을 살펴보면 추상적이고 이해하기 어려운 경우가 많습니다. 여전히 구체적인 예부터 시작해야 합니다🎜

toRef() 함수

🎜함수: value 값이 다른 개체의 특정 속성 값을 가리키고 원본 개체와 연결된 ref 개체를 만듭니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]🎜🎜즉, 반응형 객체의 속성을 기반으로 합니다. , 해당 ref를 생성하면 이렇게 생성된 ref는 소스 속성과 동기화되며 소스 객체와 참조 관계를 갖습니다🎜🎜소스 값 변경 속성은 ref 값을 업데이트합니다🎜🎜구문: const 변수 이름 = toRef(소스 객체, 소스 객체 아래의 속성) )🎜 🎜예: const name = toRef(person,'name')🎜🎜애플리케이션: 반응형에 특정 속성을 제공하려는 경우 외부 사용을 위해 별도로 객체를 사용하고 싶지 않다면 반응성을 잃고 prop의 ref를 구성된 함수에 전달하는 것도 유용할 수 있습니다🎜🎜단점: toRef() 는 하나의 속성만 처리할 수 있지만 toRefs(source object)는 한 번에 일괄 처리할 수 있습니다🎜rrreee🎜그러면 데이터를 렌더링하려는 경우 템플릿에 이렇게 쓰면 됩니다🎜rrreee🎜 싫다면 템플릿에 글이 너무 길면 아래와 같이 먼저 해체해도 됩니다🎜rrreee🎜 그런 다음 템플릿에 아래와 같이 변수를 직접 사용합니다🎜rrreee🎜이제 변수 데이터를 수정하려면 로직에 있는 데이터는 수정되지만 페이지에 있는 데이터는 업데이트되지 않습니다. 즉, 응답성이 떨어지는 것을 알 수 있습니다. 예를 들어 다음 템플릿에서 name 및 age 속성을 각각 수정합니다. 데이터를 사용하려면 아래에 표시된 대로 toRef(소스 개체, 소스 개체 아래에 지정된 속성) 함수를 빌려야 합니다. 템플릿의 🎜rrreee🎜, 여전히 위에 표시된 대로🎜rrreee🎜다음에서 찾을 수 있습니다. toRef() 함수를 사용하면 비반응형 데이터가 반응형 데이터가 되는 기능을 가지며 소스 데이터도 동기화됩니다🎜🎜순수 데이터 페이지 표시에만 사용되는 경우입니다. 데이터를 반응형 데이터로 변환할 필요가 없습니다. 데이터를 수정해야 하는 경우 toRef()함수 구현🎜ref와 다릅니다🎜아래와 같이 ref를 사용하여 데이터를 처리하는 경우 ref를 사용하세요. 데이터를 처리하며 페이지에서도 데이터의 응답성과 업데이트를 구현할 수 있지만 toRef와는 다릅니다🎜rrreee🎜데이터를 수정하면 페이지 데이터가 업데이트되지만 소스 데이터는 동기화되거나 수정되지 않으며 참조 관계가 없습니다. ref는 소스 객체의 데이터를 다시 복사하는 것과 같습니다🎜toRefs() 함수🎜toRef()는 소스 객체에 지정된 특정 속성만 처리할 수 있습니다. 하나씩 toRef()를 사용하는 것이 더 번거로울 것입니다. 그렇다면 이 toRefs()는 toRef()와 동일한 기능을 가지고 있습니다. > , 여러 ref 객체를 일괄 생성할 수 있으며 소스 객체와 동기화하고 참조 관계를 가질 수 있습니다🎜🎜구문: toRefs(소스 객체) ,toRefs(person)🎜🎜위 샘플 코드와 같이 toRefs()로 수정합니다🎜rrreee🎜결합에서 반응형 개체를 반환할 때 함수, toRefs가 유용합니다. 이를 사용하면 소비자 구성 요소는 응답성을 잃지 않고 반환된 개체를 구조화/확장할 수 있습니다.🎜rrreee🎜Notes🎜🎜toRefs는ref를 호출할 때 소스 개체의 열거 가능한 속성에 대해서만 생성됩니다. >. 아직 존재하지 않을 수 있는 속성에 대한 ref를 생성하려면 toRef를 대신 사용하세요. 🎜

왜 필요한가요? toRef() 및 toRefs() 함수

🎜목적: 응답성을 잃지 않고 객체를 분해하여 객체 데이터의 분해 및 확산을 촉진합니다🎜🎜전제: 반응형 개체(reactive로 캡슐화됨)와 일반적이지 않은 개체🎜🎜참고를 목표로 합니다. 반응형 개체를 만들지 마세요(즉, 반응형의 문제입니다) code>) 자체적으로 응답성을 계속 유지하여 toRef 또는 toRefs🎜를 통해 비응답 데이터를 응답 데이터로 변환할 수 있습니다.

요약

이 toRef() 및 toRefs()는 매우 실용적입니다. 둘 다 비응답 데이터를 개체가 유지할 수 있는 소스와 일치할 수 있는 응답 데이터로 바꿉니다. 데이터가 동기화되고 참조 관계가 있습니다. 전자는 단일 속성 데이터 처리만 지원하는 반면, 후자는 데이터가 수정되면 페이지 데이터가 업데이트됩니다. > 기능은 실제 비즈니스 개발에서 페이지의 데이터를 수정하는 경우 사용됩니다toRef()与toRefs()是非常实用的,都是将一个非响应式数据变为一个具备响应式数据能力,与源对象可保持数据的同步,具备引用关系,前者只支持单个属性数据的处理,而后者支持数据的批量处理

修改数据时,页面数据会更新,这两个composition API

(학습 영상 공유:

vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 Vue3 반응형 함수 비교: toRef() 대 toRefs()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!