watch用错性能掉一半

前端小饭桌2025-06-12 10:43

下面提出的方案，主要用于解决 Vue3 开发中的问题。

深度监听造成的性能浪费

使用深度监听（deep: true）时，它会遍历对象的所有属性。只要其中任一属性发生变化，就会触发监听，可能导致性能浪费。

对此我提供了三种解决方案

精确监听

js 复制代码

watch(
    () => bigObject.user.profile.name,
    (newVal) => {
        // 做对应业务处理
    }
)

使用 computed 做中间件

js 复制代码

const userData = computed (()=>({
    name: bigObject.user.name,
    age: bigObject.user.age
}))

watch(
    () => userData,
    (newVal) => {
        // 做对应业务处理
    }
)

使用多源监听

js 复制代码

cosnt form = relative({
    password: '',
    confirmPassword: ''
})

watch(
    [()=>bigObject.user.name, ()=>bigObject.user.age],
    ([newName, newAge])=>{
        // 处理对应业务
    }
)

结尾

我会每天更新一个知识点。如果你在开发中遇到难题，可以留言到评论区，我会选取部分问题作为选题进行解答。欢迎各位同学提问和交流！