Vue3 watch 使用与注意事项

于 2025-05-25 22:54:25 发布
阅读量899 收藏 7
点赞数 10
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19891197/article/details/148208961
版权

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

1：reactive监听对象

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = reactive({
  a: 1,
  b: 2
})

watch(
//source
  () => {
    console.log('x')
    return sum.a + sum.b
  },
//cb
  (value) => {
    console.log('执行回调sum:', value)
  }
 
)

setTimeout(() => {
  sum.a++
  sum.b--
  console.log('执行定时器了')
}, 1000)

</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

分析：组件一开始挂载先执行一次监听中的source，一秒后，因为对sum.a或sum.b操作，所以又执行了一次source，但是source的返回值都没有发生变化，所以都没有执行回调函数(cb)，这样监听只有当sum.a + sum.b返回的值发生变化，才会执行回调函数(cb)

2：reactive监听对象(使用 immediate: true，立即执行一次回调函数（cb）)

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = reactive({
  a: 1,
  b: 2
})

watch(
  //source
  () => {
    console.log('x')
    return sum.a + sum.b
  },
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  },
  //  立即执行一次回调函数（cb）
  {
    immediate: true
  }
)

setTimeout(() => {
  sum.a++
  sum.b--
  console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

3：reactive监听对象(使用 immediate: true，立即执行一次回调函数（cb）)

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = reactive({
  a: 1,
  b: 2
})

watch(
  //source
  () => {
    console.log('x')
    return sum.a + sum.b
  },
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  },
  // 深度监听
  {
    deep: true
  }
)

setTimeout(() => {
  sum.a++
  sum.b--
  console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

分析：为什么加了深度监听后会执行回调？如果你添加了 { deep: true } 选项，即使计算值相同，回调也会执行，这是因为：

1：深度监听的机制：deep: true 会让 Vue 不仅比较计算结果的最终值，还会追踪依赖项的变化

2：依赖项变化：虽然 sum.a + sum.b 的结果没变，但 sum.a 和 sum.b 本身都发生了变化

3：触发条件：深度监听下，只要依赖的响应式数据 (这里是 sum.a 和 sum.b) 发生了变化，就会触发回调，不管计算结果是否相同

如果你希望在依赖项变化时总是执行回调，即使计算结果相同，可以使用 watchEffect：

watchEffect(() => {
  const value = sum.a + sum.b
  console.log('执行回调sum:', value)
})

或者如果你想保持使用 watch 但总是触发，可以添加 flush: ‘sync’ 选项：

watch(
  () => sum.a + sum.b,
  (value) => {
    console.log('执行回调sum:', value)
  },
  { deep: true, flush: 'sync' }
)

总结:
默认情况下 watch 只在返回值变化时触发
deep: true 会让它追踪依赖项的变化，即使返回值相同也会触发

4：reactive监听对象

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = reactive({
  a: 1,
  b: 2,
  c: 3
})

watch(
  //source
  () => {
    console.log('x:', sum.c)
    return sum.a + sum.b
  },
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  }
)

setTimeout(() => {
  sum.c++
  console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

分析：一开始先执行source方法所以打印了x:3，又因为一秒后修改了c的值，同时source中对c有监听，所以又执行了一次source，但是因为返回的都是a+b，返回值没有变化，所以不执行回调函数（cb）

5：reactive监听对象

watch(
  //source
  () => {
    console.log('x:', sum.c = 10)  //修改了 `sum.c`，但没有 **读取** 它（不是依赖）
    return sum.a    // 只有 `sum.a` 被 **读取**，所以 Vue 只监听 `sum.a` 的变化
  },
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  }
)

setTimeout(() => {
  sum.c++
  console.log('执行定时器了')
}, 1000)

执行结果如下

在这里插入图片描述

5-1：reactive监听对象

watch(
  //source
  () => {
    console.log('x:', sum.c === 10)  //读取 `sum.c`， **读取** 它（是依赖）
    return sum.a  // 只有 `sum.a` 被 **读取**，所以 Vue 只监听 `sum.a` 的变化
  },
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  }
)

setTimeout(() => {
  sum.c++
  console.log('执行定时器了')
}, 1000

执行结果如下

在这里插入图片描述

总结：如果 getter 函数内部有代码修改了响应式数据（如 sum.c = 10），但 没有读取它，则 Vue 不会 将其视为依赖，因此不会触发重新执行，（sum.c === 10)，读取它，则 Vue 会 将其视为依赖，会触发重新执行

6：在 Vue 3 的 watch API 中，reactive的对象，使用函数返回值 () => sum 和直接使用 sum 作为侦听源（source）有重要区别

6-1：reactive的对象执行结果

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = reactive({
  person: { age: 18, name: '张三' },
  b: 2,
  c: 3
})

watch(
  // source
  () => {
    console.log('x')
    return sum
  },
  // sum,
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  }
)

setTimeout(() => {
  sum.person.name = '李四'
  console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

6-2：reactive的对象执行结果

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = reactive({
  person: { age: 18, name: '张三' },
  b: 2,
  c: 3
})

watch(
  // source
  // () => {
  //   console.log('x')
  //   return sum
  // },
  sum,
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  }
)

setTimeout(() => {
  sum.person.name = '李四'
  console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

总结区别：

方式监听目标深度监听适合场景
watch(sum, cb)整个响应式对象自动开启需要深度监听所有变化
watch(() => sum, cb)对象的引用不开启几乎无用（reactive 引用不变）
watch(() => sum.xxx, cb)特定属性不开启精确监听特定属性

7：在 Vue 3 的 watch API 中，ref的对象，使用函数返回值 () => sum 和直接使用 sum 作为侦听源（source）有重要区别

7-1：ref的对象执行结果

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = ref({
  person: { age: 18, name: '张三' },
  b: 2,
  c: 3
})

watch(
  // source
  // () => {
  //   console.log('x')
  //   return sum.value
  // },
  sum,
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  }
)

setTimeout(() => {
  sum.value.person.name = '李四'
  console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

7-2：ref的对象执行结果

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>两个数字的和：{{ count }}</h2>
  </div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'

let count = ref(0)

const sum = ref({
  person: { age: 18, name: '张三' },
  b: 2,
  c: 3
})

watch(
  // source
  () => {
    console.log('x')
    return sum.value
  },
  // sum,
  //cb
  (value) => {
    console.log('执行回调sum:', value)
  }
)

setTimeout(() => {
  sum.value.person.name = '李四'
  console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

总结区别：

监听方式触发条件深度监听适用场景
watch(sum, cb)仅 sum.value = newObj 时触发❌监听整个 ref 替换
watch(sum.value, cb)同理成reactive深度监听嵌套变化（不推荐）✅不推荐（可能丢失响应性）
watch(() => sum.value, cb, { deep: true })深度监听嵌套变化✅推荐（清晰且可控）
watch(() => sum.value.xxx, cb)仅监听特定属性❌精确监听，性能优化

注意：如果使用ref包裹的对象，使用ref.value得到后是一个代理，就同理成reactive

在这里插入图片描述

小徐敲java
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值