<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>
![[웹 프런트엔드] 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-api🎜🎜reactive()和ref()인수만 사용하세요: https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c