Vue3 的 watch，性能真的很差！你們知道怎么優(yōu)化嗎？
作者：林三心不學挖掘機
如果頁面中使用了大量的 watch ，但是又沒有進行防抖或者節(jié)流的限制，就會導致頁面非?？D。
最近發(fā)現(xiàn)公司某個 Vue 頁面非常卡，一看原來是因為頁面中使用了大量的 watch ，但是又沒有進行防抖或者節(jié)流的限制，導致了觸發(fā)非常頻繁，所以頁面非?？D。
所以想著，想分享一下如何給 watch 加上 防抖、節(jié)流。
一、前置知識：防抖與節(jié)流
在實現(xiàn)監(jiān)聽器之前，我們需要理解兩個核心概念：
- 防抖（Debounce）： 在連續(xù)觸發(fā)時，只在最后一次操作后等待指定時間執(zhí)行
- 節(jié)流（Throttle）： 在連續(xù)觸發(fā)時，保證固定時間間隔內(nèi)只執(zhí)行一次
二、基礎監(jiān)聽器實現(xiàn)
我們先實現(xiàn)一個簡單的響應式監(jiān)聽器，基于Vue的watch函數(shù)：
/**
* 基礎監(jiān)聽器
* @param {Ref} source 要監(jiān)聽的響應式數(shù)據(jù)
* @param {Function} callback 變化回調(diào)
* @param {Object} options 監(jiān)聽選項
*/
function basicWatcher(source, callback, options = {}) {
let cleanup = () => {}
const stop = watch(source, (value, oldValue, onCleanup) => {
// 清除之前的副作用
cleanup()
// 注冊新的清理函數(shù)
onCleanup(() => {
cleanup = () => {}
})
// 執(zhí)行回調(diào)
callback(value, oldValue)
}, options)
return stop
}三、實現(xiàn)防抖監(jiān)聽器（watchDebounced）
實現(xiàn)要點：
- 使用 setTimeout 延遲回調(diào)執(zhí)行
- 每次新變化時重置定時器
- 清理函數(shù)確保組件卸載時終止等待中的回調(diào)
/**
* 防抖監(jiān)聽器
* @param {Ref} source 要監(jiān)聽的響應式數(shù)據(jù)
* @param {Function} callback 回調(diào)函數(shù)
* @param {number} delay 防抖延遲時間（毫秒）
* @param {Object} options 監(jiān)聽選項
*/
function watchDebounced(source, callback, delay = 300, options = {}) {
let timeoutId = null
let cleanup = () => {}
const stop = watch(source, (value, oldValue, onCleanup) => {
// 清除之前的定時器和副作用
clearTimeout(timeoutId)
cleanup()
// 設置新的定時器
timeoutId = setTimeout(() => {
// 執(zhí)行回調(diào)時綁定正確的this上下文
callback.call(this, value, oldValue)
}, delay)
// 注冊清理函數(shù)
onCleanup(() => {
clearTimeout(timeoutId)
cleanup = () => {}
})
}, options)
return stop
}四、實現(xiàn)節(jié)流監(jiān)聽器（watchThrottled）
實現(xiàn)要點：
- 使用時間戳計算剩余可執(zhí)行時間
- 未到間隔時間時，設置剩余時間的定時器
- 保證間隔時間內(nèi)至少執(zhí)行一次
/**
* 節(jié)流監(jiān)聽器
* @param {Ref} source 要監(jiān)聽的響應式數(shù)據(jù)
* @param {Function} callback 回調(diào)函數(shù)
* @param {number} interval 節(jié)流間隔（毫秒）
* @param {Object} options 監(jiān)聽選項
*/
function watchThrottled(source, callback, interval = 300, options = {}) {
let lastExecTime = 0
let cleanup = () => {}
let timeoutId = null
const stop = watch(source, (value, oldValue, onCleanup) => {
const now = Date.now()
const elapsed = now - lastExecTime
// 清除等待中的定時器
clearTimeout(timeoutId)
cleanup()
if (elapsed >= interval) {
// 立即執(zhí)行
callback(value, oldValue)
lastExecTime = now
} else {
// 設置剩余時間的定時器
timeoutId = setTimeout(() => {
callback(value, oldValue)
lastExecTime = Date.now()
}, interval - elapsed)
}
onCleanup(() => {
clearTimeout(timeoutId)
cleanup = () => {}
})
}, options)
return stop
}五、使用示例
<script setup>
import { ref } from 'vue'
const searchKeyword = ref('')
// 防抖監(jiān)聽示例
watchDebounced(
searchKeyword,
(newVal) => {
console.log('防抖搜索:', newVal)
// 這里可以執(zhí)行API請求
},
500
)
// 節(jié)流監(jiān)聽示例
watchThrottled(
searchKeyword,
(newVal) => {
console.log('節(jié)流記錄:', newVal)
// 這里可以執(zhí)行高頻狀態(tài)記錄
},
1000
)
</script>責任編輯：趙寧寧
來源：
前端之神
