몇몇 사람들의 Vue 3 미리보기 튜토리얼에서 몇 가지 예를 확인해 보세요. [현재 베타 버전]
두 가지 예를 찾았습니다.
<템플릿> <버튼 @click="increment"> 개수: {{ state.count }}, double: {{ state.double }} <스크립트> 'vue'에서 { 반응형, 계산형 } 가져오기 기본값 내보내기 { 설정() { const 상태 = 반응성({ 개수: 0, double: 계산(() => state.count * 2) }) 함수 증분() { 상태.수++ } 반품 { 상태, 증가 } } }
<템플릿><스크립트> "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, 형식화된돈, 추가하다 }; } };{{ formattedMoney }}
<버튼 @click="추가">추가
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ref和reactive둘 다 데이터를 저장하고 데이터에 응답할 수 있는 방법을 제공한다는 점에서 몇 가지 유사점이 있습니다.하지만:
높은 수준의 차이:
으아악출처: Vue 포럼 토론
반응
reactive获取对象并向原始对象返回一个响应式代理.예
으아악지침
위에서
page,의 속성을 변경하거나 액세스하려고 할 때마다 예를 들어
page.ads，page.filteredAds는 프록시를 통해 업데이트됩니다.핵심 포인트
- 뒤에서 불려지고 있어요
- 에 개체가 모두 적용되므로
에는 재할당을 위한reactive()객체만 허용합니다.JS 기본 형식은 허용되지 않습니다.(문자열, 부울, 숫자, BigInt, 기호, null, 정의되지 않음)ref()正在幕后调用reactive()reactive()适用于对象，并且ref()调用reactive()개체에 적용되고ref()有一个用于重新分配的.value属性，reactive()단,.value속성이 있지만,에는 이 속성이 없으므로 재할당할 수 없습니다
ref()사용- 언제...
입니다(예:
- 등)
이것은 나중에 재할당해야 하는 객체입니다(배열과 유사 -
자세한 정보는 여기'string'、true、23기본)
reactive()- 언제...
이것은 재할당할 필요가 없는 개체이며 의 오버헤드를 피하려는 경우ref()ref()似乎是可行的方法，因为它支持所有对象类型并允许使用.value重新分配。ref()是一个很好的起点，但是当您习惯了该 API 后，就会知道reactive()요약
는 좋은 출발점이지만 API에 익숙해지면ref()모든 개체 유형을 지원하고.value를 사용하여 재할당을 허용하므로 좋은 방법인 것 같습니다.이 오버헤드가 적고 요구 사항에 더 적합하다는 것을 알게 될 것입니다.
ref()，但ref()사용 사례
기본 요소의 경우 항상reactive()를 사용하지만
으아악reactive()는 재할당이 필요한 개체(예: 배열)에 유용합니다.위
에서는 전체 개체가 아닌 속성을 다시 할당해야 합니다.으아악
사용 사례
reactive()의 좋은 사용 사례는 함께 속하는 기본 요소 집합입니다.으아악위의 코드는 위의 코드보다 더 논리적으로 느껴집니다
으아악유용한 링크
ref()아직도 헤매고 있다면 이 간단한 가이드가 도움이 되었습니다:https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/
및 에 대한 결정은 다른 중요한 정보와 함께 Vue Composition API RFC(https://vuejs.org/guide/extras/composition-api-faq)에 존재합니다. html#why-composition-apireactive()和ref()인수만 사용하세요:https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c