Vue3----玩转customRef与shallowRef

最新推荐文章于 2025-10-29 16:00:32 发布

原创最新推荐文章于 2025-10-29 16:00:32 发布 · 335 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue3----玩转customRef与shallowRef

方法介绍：
一、 customRef
作用：创建一个自定义的ref，并且可以对其依赖跟踪和更新触发进行显示控制。
customRef体现了我们对响应式原理的理解：我们知道响应式系统工作的两个核心是track()（依赖收集）和trigger()（更新触发）。能够使用customRef意味着我们已经从API使用者变成了API“创造者”。

二、shallowRef
作用：创建一个只对 .value 赋值操作是响应式的ref。其内部的值不会被深层地转换为响应式对象。

shallowRef是性能优化的利器：当我们有大型的、不可变的数据结构时（例如一个巨大的JSON对象、一个第三方库的实例echarts等等），使用ref会对其进行深度递归代理，造成不必要的性能开销。此时shallowRef就是最佳选择。

项目实践
一、customRef
创建一个useDebouncedRef 来实现输入框请求防抖的 composable API

// composables/useDebouncedRef.ts

export function useDebouncedRef(value: T, delay = 500) {
	let timeout: number;
	return customRef((track, trigger) => {
		return {
			get() {
				track(); // 标记，需要追踪依赖
				return value;
			},
			set(newValue: T) {
				clearTimeout(timeout);
				timeout = setTimeout(() => {
					value = newValue;
					trigger(); // 触发DOM更新
				}, delay)
			}
		}
	})
}

二、shallowRef
使用shallowRef优化大型数据，假设我们需要引入一个庞大的图表库实例，这个实例本身有很多内部属性，但我们只关心实例本身是否被替换。此时就可以使用shallowRef 来代替ref 可以减少很多不必要的性能开销。

<template>
	<div ref="chartContainer"></div>
<template>
<script setup lang="ts">
import {onMounted,shallowRef,triggerRef }from 'vue';
import SomeHeavyChartLibrary from 'some-heavy-chart-library';
//使用 shallowRef，Vue 不会尝试代理 aChartInstance 内部的所有属性
const chartInstance=shallowRef(null);
const chartContainer=ref(null);
onMounted(()=>{
	//aChartInstance 的赋值是响应式的
	chartInstance.value = new SomeHeavyChartLibrary(chartContainer.value);
});
function updateChartWithOptions(new0ptions){
	if(chartInstance.value){
		// chartInstance 内部属性的改变不会触发更新		
		chartInstance.value.setOptions(new0ptions);
		//如果我们确实需要手动强制更新，可以使用 triggerRefT1
		// triggerRef(chartInstance)
	}
}
</script>