Vue3의 다른 Composition API는 무엇입니까?

1.shallowReactive 및shallowRef

• shallowReactive: 객체의 가장 바깥쪽 속성만 처리하는 Reactive(얕은 반응성)입니다.

• shallowRef: 기본 데이터 유형의 응답성만 처리하고 객체의 응답성 처리는 수행하지 않습니다.

• 언제 사용하나요?

• 객체 데이터가 있으면 구조가 비교적 깊지만 변경되면 외부 속성만 변경됩니다 ===>shallowReactive.

• 객체 데이터가 있는 경우 후속 함수는 객체의 속성을 수정하지 않지만 ===>shallowRef를 대체할 새 객체를 생성합니다.

2.readonly 및shallowReadonly

• readonly: 반응형 데이터를 읽기 전용(깊은 읽기 전용)으로 만듭니다.

• shallowReadonly: 반응형 데이터를 읽기 전용(얕은 읽기 전용)으로 만듭니다.

• 적용 시나리오: 데이터 수정을 원하지 않는 경우.

3.toRaw 및 markRaw

• toRaw:

• 기능: reactive에서 생성된 반응형 개체를 일반 개체로 변환합니다.

• 사용 시나리오: 반응형 개체에 해당하는 일반 개체를 읽는 데 사용됩니다. 이 일반 개체에 대한 모든 작업은 페이지 업데이트를 발생시키지 않습니다.

• markRaw:

• 기능: 다시는 반응형 개체가 되지 않도록 개체를 표시합니다.

• 응용 시나리오:

• 복잡한 타사 라이브러리 등과 같은 일부 값은 반응형으로 설정하면 안 됩니다.

• 반응형 변환을 건너뛰면 불변 데이터 소스가 포함된 대규모 목록을 렌더링할 때 성능이 향상될 수 있습니다.

4.customRef

• 기능: 사용자 정의 참조를 생성하고 종속성 추적 및 업데이트 트리거링을 명시적으로 제어합니다.

• 흔들림 방지 효과 달성:

<template>
	<input type="text" v-model="keyword">
	<h4>{{keyword}}</h4>
</template>

<script>
	import {ref,customRef} from &#39;vue&#39;
	export default {
		name:&#39;Demo&#39;,
		setup(){
			// let keyword = ref(&#39;hello&#39;) //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef(&#39;hello&#39;,500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

위 내용은 Vue3의 다른 Composition API는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!