What are the other Composition APIs in Vue3?

1.shallowReactive and shallowRef

• shallowReactive: Reactive (shallow reactive) that only processes the outermost properties of the object.

• shallowRef: Only handles responsiveness of basic data types, and does not perform responsive processing of objects.

• When to use it?

• If there is an object data, the structure is relatively deep, but when it changes, only the outer attributes change = ==> shallowReactive.

• If there is an object data, subsequent functions will not modify the attributes in the object, but generate a new object to replace ===> shallowRef.

2.readonly and shallowReadonly

• readonly: Make a responsive data read-only (deep read-only).

• shallowReadonly: Make a responsive data read-only (shallow read-only).

• Application scenario: When you do not want the data to be modified.

3.toRaw and markRaw

• toRaw:

• Function: convert a The responsive object generated by reactive is converted into a ordinary object.

• Usage scenario: Used to read the ordinary object corresponding to the responsive object. All operations on this ordinary object will not cause page updates.

• markRaw:

• Function: Mark an object so that it will never become a responsive object again.

• Application scenarios:

• Some values ​​should not be set to be responsive, such as complex third-party libraries, etc.

• Skipping reactive transformations can improve performance when rendering large lists with immutable data sources.

4.customRef

• Function: Create a custom ref and explicitly control its dependency tracking and update triggering.

• Achieve anti-shake effect:

<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>

The above is the detailed content of What are the other Composition APIs in Vue3?. For more information, please follow other related articles on the PHP Chinese website!