Vue 3의 Ref와 React?

Question

<p>몇몇 사람들의 Vue 3 미리보기 튜토리얼에서 몇 가지 예를 확인해 보세요. [현재 베타 버전]</p> <p>두 가지 예를 찾았습니다.</p> <h2>반응식</h2> <pre class="brush:js;toolbar:false;"><템플릿> <버튼 @click="increment"> 개수: {{ state.count }}, double: {{ state.double }} </버튼> </템플릿> <스크립트> 'vue'에서 { 반응형, 계산형 } 가져오기 기본값 내보내기 { 설정() { const 상태 = 반응성({ 개수: 0, double: 계산(() => state.count * 2) }) 함수 증분() { 상태.수++ } 반품 { 상태, 증가 } } } </스크립트> </pre>

참조

<pre class="brush:js;toolbar:false;"><템플릿> <div> <h2 ref="titleRef">{{ formattedMoney }}</h2> <input v-model="delta" type="number"> <버튼 @click="추가">추가</button> </div> </템플릿> <스크립트> "vue"에서 { ref, 계산, onMounted } 가져오기; 기본값 내보내기 { 설정(소품) { //상태 const 돈 = ref(1); const delta = ref(1); // 참조 const titleRef = ref(null); // 계산된 소품 const formattedMoney = 계산(() =>money.value.toFixed(2)); //후크 onMounted(() => { console.log("titleRef", titleRef.value); }); // 메소드 const add = () => (money.value += Number(delta.value)); 반품 { 델타, 돈, 제목Ref, 형식화된돈, 추가하다 }; } }; </스크립트> </pre> <p><br /></p>

Answer 1

ref 和 reactive 둘 다 데이터를 저장하고 데이터에 응답할 수 있는 방법을 제공한다는 점에서 몇 가지 유사점이 있습니다.

하지만:

높은 수준의 차이:

으아악

출처: Vue 포럼 토론< /p>

반응

reactive 获取对象并向原始对象返回一个响应式代理.

예

으아악

지침

위에서 page,
의 속성을 변경하거나 액세스하려고 할 때마다 예를 들어 page.ads，page.filteredAds는 프록시를 통해 업데이트됩니다.

Answer 2

핵심 포인트

• reactive() 객체만 허용합니다. JS 기본 형식은 허용되지 않습니다. (문자열, 부울, 숫자, BigInt, 기호, null, 정의되지 않음) < /里>
• 뒤에서 불려지고 있어요 ref() 正在幕后调用 reactive()
• reactive() 适用于对象，并且 ref() 调用 reactive() 개체에 적용되고
호출
• 에 개체가 모두 적용되므로 ref() 有一个用于重新分配的 .value 属性，reactive() < /里>단,

에는 재할당을 위한 .value 속성이 있지만,

에는 이 속성이 없으므로 재할당할 수 없습니다

ref()사용

• 언제... 'string'、true、23 기본
입니다(예:
• 등)
이것은 나중에 재할당해야 하는 객체입니다(배열과 유사 -

자세한 정보는 여기

)reactive()

• 언제...ref()

이것은 재할당할 필요가 없는 개체이며

의 오버헤드를 피하려는 경우

ref() 似乎是可行的方法，因为它支持所有对象类型并允许使用 .value 重新分配。 ref() 是一个很好的起点，但是当您习惯了该 API 后，就会知道 reactive()요약

ref() 모든 개체 유형을 지원하고 .value를 사용하여 재할당을 허용하므로 좋은 방법인 것 같습니다.

는 좋은 출발점이지만 API에 익숙해지면

이 오버헤드가 적고 요구 사항에 더 적합하다는 것을 알게 될 것입니다. ref()，但 ref()

사용 사례reactive()

기본 요소의 경우 항상

를 사용하지만 reactive()는 재할당이 필요한 개체(예: 배열)에 유용합니다.

으아악

위

에서는 전체 개체가 아닌 속성을 다시 할당해야 합니다.

으아악

사용 사례

reactive()의 좋은 사용 사례는 함께 속하는 기본 요소 집합입니다. 으아악 위의 코드는 위의 코드보다 더 논리적으로 느껴집니다

으아악

유용한 링크ref() 아직도 헤매고 있다면 이 간단한 가이드가 도움이 되었습니다: https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/

reactive() 和 ref() 인수만 사용하세요: https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c

🎜 🎜🎜 및 🎜에 대한 결정은 다른 중요한 정보와 함께 Vue Composition API RFC(🎜https://vuejs.org/guide/extras/composition-api-faq)에 존재합니다. html#why-composition-api🎜🎜