自定义ref实现原理
在Vue 3中，除了内置的ref和reactive，我们还可以使用customRef API创建自定义的响应式引用。自定义ref允许我们精确控制依赖收集和触发更新的时机，从而实现更灵活的响应式行为。本集我们将深入探讨自定义ref的实现原理和使用方法。
一、自定义ref的基本概念
1. 什么是自定义ref？
自定义ref是Vue 3提供的一种创建响应式引用的高级方式，它允许我们自定义响应式引用的getter和setter逻辑，并精确控制依赖收集和触发更新的时机。
2. 自定义ref的作用
- 精细控制响应式行为：可以自定义何时收集依赖，何时触发更新
- 实现防抖或节流：可以在setter中添加防抖或节流逻辑
- 实现异步更新：可以在setter中执行异步操作，完成后再触发更新
- 实现自定义缓存机制：可以根据需求实现自定义的缓存策略
- 实现计算属性的变体：可以创建具有特殊行为的计算属性
3. customRef API的语法
import { customRef } from 'vue'
function useCustomRef(value) {
return customRef((track, trigger) => {
return {
get() {
// 收集依赖
track()
return value
},
set(newValue) {
// 更新值
value = newValue
// 触发更新
trigger()
}
}
})
}二、自定义ref的基本使用
1. 基本示例
import { customRef } from 'vue'
// 创建一个简单的自定义ref
function useMyRef(initialValue) {
return customRef((track, trigger) => {
console.log('Custom ref created')
let value = initialValue
return {
get() {
console.log('Getting value:', value)
track() // 收集依赖
return value
},
set(newValue) {
console.log('Setting value:', newValue)
value = newValue
trigger() // 触发更新
}
}
})
}
// 使用自定义ref
const count = useMyRef(0)
count.value++ // 输出: Setting value: 1
console.log(count.value) // 输出: Getting value: 1 然后输出: 12. 实现防抖效果
import { customRef } from 'vue'
// 创建一个带防抖效果的自定义ref
function useDebouncedRef(initialValue, delay = 300) {
let timeoutId
return customRef((track, trigger) => {
let value = initialValue
return {
get() {
track()
return value
},
set(newValue) {
// 清除之前的定时器
clearTimeout(timeoutId)
// 设置新的定时器，延迟触发更新
timeoutId = setTimeout(() => {
value = newValue
trigger() // 触发更新
}, delay)
}
}
})
}
// 使用带防抖效果的ref
const searchQuery = useDebouncedRef('')
// 快速连续修改值，只会在最后一次修改后延迟300ms触发更新
searchQuery.value = 'a'
searchQuery.value = 'ab'
searchQuery.value = 'abc' // 只有这次会在300ms后触发更新3. 实现异步更新
import { customRef } from 'vue'
// 创建一个异步更新的自定义ref
function useAsyncRef(initialValue) {
return customRef((track, trigger) => {
let value = initialValue
let pending = false
return {
get() {
track()
return value
},
set(newValue) {
if (pending) return
pending = true
// 模拟异步操作
setTimeout(() => {
value = newValue
pending = false
trigger() // 异步操作完成后触发更新
}, 1000)
}
}
})
}
// 使用异步更新的ref
const asyncValue = useAsyncRef(0)
asyncValue.value = 100 // 1秒后才会更新并触发组件重新渲染三、自定义ref的实现原理
1. customRef的内部实现
customRef的内部实现基于Vue 3的响应式系统，主要包括以下几个部分：
- 创建响应式引用：
customRef函数接收一个工厂函数，返回一个带有get和set方法的对象 - 依赖收集：在getter中调用
track函数，收集当前组件的依赖 - 触发更新：在setter中调用
trigger函数，触发依赖组件的重新渲染 - 返回ref对象：
customRef函数返回一个ref对象，该对象具有.value属性
2. 简化的实现原理
function customRef(factory) {
let value
let dep = null
// 调用工厂函数，获取get和set方法
const { get, set } = factory(
// track函数：收集依赖
() => {
if (dep) {
// 将当前组件的副作用添加到依赖列表中
dep.add(activeEffect)
}
},
// trigger函数：触发更新
() => {
if (dep) {
// 遍历依赖列表，触发所有副作用
dep.forEach(effect => effect())
}
}
)
// 创建并返回ref对象
return {
get value() {
return get()
},
set value(newValue) {
set(newValue)
}
}
}3. 与ref的区别
| 特性 | ref |
customRef |
|---|---|---|
| 实现方式 | 内置实现 | 自定义实现 |
| 控制程度 | 固定的getter和setter逻辑 | 完全自定义的getter和setter逻辑 |
| 依赖收集 | 自动收集 | 手动调用track函数收集 |
| 触发更新 | 自动触发 | 手动调用trigger函数触发 |
| 适用场景 | 一般响应式场景 | 需要精细控制响应式行为的场景 |
四、自定义ref的高级用法
1. 实现带缓存的自定义ref
import { customRef } from 'vue'
// 创建一个带缓存的自定义ref，只有当值真正改变时才触发更新
function useCachedRef(initialValue) {
return customRef((track, trigger) => {
let value = initialValue
return {
get() {
track()
return value
},
set(newValue) {
// 只有当值真正改变时才更新并触发更新
if (newValue !== value) {
value = newValue
trigger()
}
}
}
})
}
// 使用带缓存的ref
const cachedValue = useCachedRef('initial')
cachedValue.value = 'initial' // 值未改变，不会触发更新
cachedValue.value = 'new' // 值改变，会触发更新2. 实现只读的自定义ref
import { customRef } from 'vue'
// 创建一个只读的自定义ref
function useReadOnlyRef(value) {
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
// 只读ref，忽略set操作
console.warn('Cannot modify read-only ref')
}
}
})
}
// 使用只读ref
const readOnlyValue = useReadOnlyRef('hello')
readOnlyValue.value = 'world' // 输出警告：Cannot modify read-only ref
console.log(readOnlyValue.value) // 输出：hello3. 实现基于本地存储的自定义ref
import { customRef } from 'vue'
// 创建一个基于localStorage的自定义ref，自动同步到本地存储
function useLocalStorageRef(key, initialValue) {
// 从本地存储获取初始值
const storedValue = localStorage.getItem(key)
const initial = storedValue !== null ? JSON.parse(storedValue) : initialValue
return customRef((track, trigger) => {
let value = initial
return {
get() {
track()
return value
},
set(newValue) {
value = newValue
// 同步到本地存储
localStorage.setItem(key, JSON.stringify(newValue))
trigger()
}
}
})
}
// 使用基于本地存储的ref
const username = useLocalStorageRef('username', 'Guest')
username.value = 'Alice' // 会自动同步到localStorage4. 实现基于URL参数的自定义ref
import { customRef } from 'vue'
// 创建一个基于URL参数的自定义ref，自动同步到URL
function useUrlSearchParamRef(paramName, initialValue) {
// 从URL获取初始值
const urlParams = new URLSearchParams(window.location.search)
const initial = urlParams.get(paramName) || initialValue
return customRef((track, trigger) => {
let value = initial
return {
get() {
track()
return value
},
set(newValue) {
value = newValue
// 同步到URL
const url = new URL(window.location.href)
url.searchParams.set(paramName, newValue)
window.history.pushState({}, '', url)
trigger()
}
}
})
}
// 使用基于URL参数的ref
const searchQuery = useUrlSearchParamRef('q', '')
searchQuery.value = 'vue3' // 会自动更新URL为：?q=vue3五、自定义ref与其他响应式API的比较
1. customRef vs ref
- ref：内置的响应式引用，自动处理依赖收集和触发更新
- customRef：自定义的响应式引用，需要手动处理依赖收集和触发更新
- 选择建议：对于一般场景使用
ref，对于需要精细控制响应式行为的场景使用customRef
2. customRef vs computed
- computed：基于响应式依赖计算得出的值，具有缓存机制
- customRef：可以实现更复杂的计算逻辑，包括异步操作和自定义缓存
- 选择建议：对于简单的同步计算使用
computed，对于复杂的计算或异步操作使用customRef
3. customRef vs watch
- watch：监听响应式数据变化，执行副作用
- customRef：创建响应式引用，自定义getter和setter逻辑
- 选择建议：对于需要监听数据变化执行副作用使用
watch，对于需要创建具有特殊行为的响应式引用使用customRef
六、自定义ref的最佳实践
1. 保持自定义ref简洁
自定义ref的工厂函数应该保持简洁，只包含必要的逻辑：
// 推荐：简洁的自定义ref
function useDebouncedRef(initialValue, delay = 300) {
let timeoutId
return customRef((track, trigger) => {
let value = initialValue
return {
get() { track(); return value },
set(newValue) {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => {
value = newValue
trigger()
}, delay)
}
}
})
}2. 提供合理的默认值
为自定义ref的参数提供合理的默认值，提高易用性：
// 推荐：提供默认值
function useDebouncedRef(initialValue, delay = 300) {
// ...
}
// 不推荐：没有默认值
function useDebouncedRef(initialValue, delay) {
// ...
}3. 处理边缘情况
在自定义ref中处理可能的边缘情况，提高健壮性：
// 推荐：处理边缘情况
function useLocalStorageRef(key, initialValue) {
if (!key) {
console.error('useLocalStorageRef requires a key')
return customRef(() => ({ get: () => initialValue, set: () => {} }))
}
// ... 正常逻辑
}4. 提供清晰的文档
为自定义ref提供清晰的文档，说明其用途、参数和返回值：
/**
* 创建一个带防抖效果的自定义ref
* @param {any} initialValue - 初始值
* @param {number} delay - 防抖延迟时间，默认300ms
* @returns {Ref} - 带防抖效果的ref对象
*/
function useDebouncedRef(initialValue, delay = 300) {
// ...
}七、自定义ref的性能考虑
1. 避免在getter中执行昂贵操作
getter函数会在每次访问时执行，因此应该避免在getter中执行昂贵的操作：
// 不推荐：在getter中执行昂贵操作
function useExpensiveRef() {
return customRef((track, trigger) => {
return {
get() {
track()
// 昂贵操作：应该避免
for (let i = 0; i < 1000000; i++) {
// 一些昂贵的计算
}
return result
},
set(newValue) {
// ...
trigger()
}
}
})
}
// 推荐：将昂贵操作移到setter或其他地方
function useExpensiveRef() {
let cachedResult
return customRef((track, trigger) => {
return {
get() {
track()
return cachedResult
},
set(newValue) {
// 在setter中执行昂贵操作
for (let i = 0; i < 1000000; i++) {
// 一些昂贵的计算
}
cachedResult = result
trigger()
}
}
})
}2. 合理使用track函数
track函数用于收集依赖，应该只在必要时调用：
// 推荐：只在需要收集依赖时调用track
function useCustomRef() {
return customRef((track, trigger) => {
let value
return {
get() {
track() // 只在第一次访问时收集依赖
return value
},
set(newValue) {
value = newValue
trigger()
}
}
})
}3. 合理使用trigger函数
trigger函数用于触发更新，应该只在值真正改变时调用：
// 推荐：只在值真正改变时调用trigger
function useCustomRef(initialValue) {
return customRef((track, trigger) => {
let value = initialValue
return {
get() {
track()
return value
},
set(newValue) {
if (newValue !== value) { // 只在值改变时更新
value = newValue
trigger()
}
}
}
})
}八、自定义ref的调试
1. 使用console.log调试
function useCustomRef(initialValue) {
return customRef((track, trigger) => {
let value = initialValue
return {
get() {
console.log('Getting value:', value)
track()
return value
},
set(newValue) {
console.log('Setting value:', newValue)
value = newValue
trigger()
}
}
})
}2. 使用debugger调试
function useCustomRef(initialValue) {
return customRef((track, trigger) => {
let value = initialValue
return {
get() {
debugger // 断点调试
track()
return value
},
set(newValue) {
debugger // 断点调试
value = newValue
trigger()
}
}
})
}3. 监控依赖收集和触发更新
function useCustomRef(initialValue) {
let dependencyCount = 0
let updateCount = 0
return customRef((track, trigger) => {
let value = initialValue
return {
get() {
dependencyCount++
console.log(`Dependency collected: ${dependencyCount} times`)
track()
return value
},
set(newValue) {
updateCount++
console.log(`Update triggered: ${updateCount} times`)
value = newValue
trigger()
}
}
})
}九、总结
1. 核心概念
- 自定义ref是Vue 3提供的一种创建响应式引用的高级方式
customRefAPI接收一个工厂函数，返回一个带有get和set方法的对象- 在getter中调用
track函数收集依赖 - 在setter中调用
trigger函数触发更新 - 自定义ref允许我们精确控制依赖收集和触发更新的时机
2. 使用场景
- 需要精细控制响应式行为的场景
- 实现防抖或节流效果
- 实现异步更新
- 实现自定义缓存机制
- 实现计算属性的变体
3. 最佳实践
- 保持自定义ref简洁
- 提供合理的默认值
- 处理边缘情况
- 提供清晰的文档
- 避免在getter中执行昂贵操作
- 合理使用track和trigger函数
4. 性能考虑
- 避免在getter中执行昂贵操作
- 只在必要时调用track函数
- 只在值真正改变时调用trigger函数
十、练习题
基础练习：
- 创建一个简单的自定义ref，实现值的双向绑定
- 在模板中使用自定义ref，观察其行为
进阶练习：
- 实现一个带节流效果的自定义ref
- 实现一个基于sessionStorage的自定义ref
- 实现一个带有过期时间的自定义ref
综合练习：
- 实现一个复杂的自定义ref，结合防抖、节流和缓存机制
- 实现一个用于表单验证的自定义ref
- 实现一个用于API请求的自定义ref，自动处理加载状态和错误
性能优化练习：
- 对比自定义ref和内置ref的性能差异
- 优化自定义ref的getter和setter，提高性能
- 实现一个高效的自定义ref，用于处理大型数据集
十一、扩展阅读
在下一集中，我们将学习"响应式工具函数集合"，深入探讨Vue 3提供的各种响应式工具函数。