요약 Vue는 반응형 데이터 객체(reactive, ref, toRef, toRefs)를 생성합니다.

1. 반응형

reactive 메소드는 수신 객체를 기반으로 깊은 반응형 객체(프록시 프록시 객체)를 생성하고 반환합니다. reactive方法根据传入的对象，创建返回一个深度响应式对象（Proxy代理对象）。

reactive 会对传入对象进行包裹，创建一个该对象的
Proxy代理对象。它是源对象的响应式副本，不等于原始对象。它==“深层”==转换了源对象的所有嵌套property（属性）
，解包并维持其中的任何ref引用关系。

响应式对象属性值改动，不管层级有多深，都会触发响应式。新增和删除属性也会触发响应式。

二、ref

ref 函数用来将一项数据包装成一个响应式 ref 对象。它接收任意数据类型的参数，作为这个 ref 对象 内部的 value property 的值。

• 生成值类型数据（String，Number，Boolean，Symbol）的响应式对象

• 可以用ref对象.value访问或更改这个值。

• 生成对象和数组类型的响应式对象 （对象和数组一般不选用ref方式，而选用reactive方式，比较便捷）

三、reactive对比ref

• 从定义数据角度对比：

  • ref用来定义：任意数据类型

  • reactive用来定义：对象（或数组）类型数据

如何选择 ref 和 reactive？建议：

• 基础类型值(String，Number，Boolean，Symbol) 或单值对象(类似{ count: 1 }这样只有一个属性值的对象) 使用 ref

• 引用类型值(Object、Array)使用 reactive

• 从原理角度对比：

  • ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）。

  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

• 从使用角度对比：

  • ref定义的数据：访问或更改数据需要.value
  • reactive定义的数据：操作数据与读取数据均不需要.value。

四、toRef

• 针对一个响应式对象（reactive封装）的prop（属性）创建一个ref，且保持响应式

• 两者保持引用关系

语法：const 属性名= toRef(对象,'属性名')

五、toRefs

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法

• 将响应式对象（reactive封装）转成普通对象

• 对象的每个属性(Prop)都是对应的ref

• 两者保持引用关系

语法：const 属性名= toRefs(对象,'属性名')

注意：reactive封装的响应式对象，不要直接通过解构的方式return，这是不具有响应式的。

可以通过 toRefs 处理，然后再解构返回，这样才具有响应式

const state = reactive({ 
		age: 20,
      	name: 'zhangsan'});
return {...state}; // 错误的方式，会丢失响应式
return toRefs(state); // 正确的方式
//最佳方式
return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。

六、一些问题

为什么有了reactive函数还需要ref函数呢？

当我们只想让某个变量实现响应式的时候，采用reactive就会比较麻烦，因此vue3提供了ref方法进行简单值的监听，但并不是说ref只能传入简单值，他的底层是reactive，所以reactive有的，它都有。

记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})

reactive는 들어오는 객체를 래핑하고 해당 객체에 대한
프록시 프록시 객체를 생성합니다. 이는 소스 개체의 반응형 복사본이며 원본 개체와 동일하지 않습니다. It == "deeply" == 소스 객체의 중첩된 모든 속성을 변환하고 그 안에 있는 모든 참조 참조를 압축을 풀고 유지합니다.

반응형 개체의 속성 값이 변경되면 레벨이 아무리 깊어도 반응성이 트리거됩니다. 속성을 추가하고 삭제하면 반응성이 트리거됩니다. ref 함수는 데이터 항목을 반응형 참조 개체로 래핑하는 데 사용됩니다. 이 참조 개체 내의 value 속성 값으로 모든 데이터 유형의 매개변수를 허용합니다.

• 값 유형 데이터 생성(문자열, 숫자, 부울, 기호) 반응형 object
• ref object.value를 사용하여 이 값에 액세스하거나 변경할 수 있습니다. 🎜
• 🎜객체 및 배열 유형의 반응형 객체 생성(객체 및 배열은 일반적으로 ref 모드를 사용하지 않고 반응형 모드를 사용하므로 더 편리함)🎜
🎜3. 반응적 비교 ref🎜
• 🎜데이터 정의 관점에서의 비교:🎜
  • 🎜ref는 다음을 정의하는 데 사용됩니다: 모든 데이터 유형🎜
  • 🎜reactive는 다음을 정의하는 데 사용됩니다: 객체(또는 배열) 유형 데이터🎜

🎜Ref와 Reactive를 어떻게 선택하나요? 제안: 🎜

• 🎜기본 유형 값 ​​(문자열, 숫자, 부울, 기호) 또는 단일 값 객체({ count와 유사) : 1 } 속성 값이 하나만 있는 객체) ref🎜
• 🎜참조 유형 값 사용 ​​(Object, Array) 반응성🎜

🎜Angle 비교 원리에서: 🎜
• 🎜ref는 Object.defineProperty()의 get 및 설정). 🎜
• 🎜reactive는 Proxy를 사용하여 응답성(데이터 하이재킹)을 구현하고 Reflect Data를 통해 내부적으로 소스 객체를 작동합니다 🎜
• 🎜사용 측면에서의 비교: 🎜
  • ref로 정의된 데이터: 데이터에 액세스하거나 변경하려면 .value가 필요합니다.
  li>
  • reactive: .value로 정의된 데이터는 데이터 연산 및 데이터 읽기에 필요하지 않습니다.
🎜4. toRef🎜
• 🎜반응형 객체의 속성(속성)에 대한 참조를 생성하고 반응성을 유지합니다. 🎜
• 🎜둘은 참조 관계를 유지합니다🎜
🎜구문: const attribute name = toRef(object,'property name')🎜🎜5. toRefs🎜🎜toRefs는 반응 객체를 파괴하고 해당 모든 속성을 refs🎜
• 🎜반응 객체(반응 캡슐화)를 일반 객체로 변환🎜
🎜객체의 각 속성(Prop)은 해당 ref🎜
• 🎜둘은 참조 관계를 유지합니다🎜
🎜Syntax: const attribute name = toRefs (객체,'속성 이름')🎜🎜참고: 캡슐화된 반응형 반응형 객체는 분해를 통해 직접 반환되어서는 안 됩니다. 이는 반응형이 아닙니다. 🎜🎜 toRefs를 통해 처리한 다음 분해하여 반환할 수 있으므로 반응성이 뛰어납니다🎜rrreee🎜 6. 몇 가지 질문🎜

🎜반응형 함수가 있는데 왜 ref 함수가 필요한가요? 🎜

🎜특정 변수만 반응형으로 만들고 싶을 때는 반응형을 사용하는 것이 더 번거롭기 때문에 vue3에서는 간단한 값을 모니터링하는 ref 메서드를 제공하지만 그렇다고 ref가 간단한 값만 전달할 수 있다는 의미는 아닙니다. . , 맨 아래 레이어는 반응성이 있으므로 반응성이 있는 모든 것을 갖습니다. 🎜🎜기억하세요: ref도 본질적으로 반응적이며, ref(obj)는 반응성({값: obj})과 동일합니다.🎜🎜🎜🎜🎜🎜🎜🎜【관련 추천: 🎜vue.js 동영상 튜토리얼 🎜】🎜

위 내용은 요약 Vue는 반응형 데이터 객체(reactive, ref, toRef, toRefs)를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!