watchEffect 错误的使用方式

在 Vue 的 watchEffect 中，依赖的收集是基于响应式的数据读取。如果某个条件分支导致某些响应式数据没有被读取，Vue 就无法收集这些响应式数据的依赖。这会导致某些情况下响应式数据的变更无法触发 watchEffect 的重新执行。

错误示例 1

<script setup lang="ts">
import { ref, watchEffect } from 'vue'

const a = ref(true)
const b = ref(false)

watchEffect(() => {
  if (a.value || b.value) {
    console.log('a 或 b 为 true')
  }

  console.log('执行了watchEffect')
})
</script>

<template>
  <button @click="b = !b">点我</button>

  <p>a的值：{{ a }}</p>
  <p>b的值：{{ b }}</p>
</template>

错误原因

在 watchEffect 中，当 a.value 为 true 时，由于逻辑短路 (|| 运算符的短路行为)，b.value 不会被访问。这意味着 b.value 不会被 Vue 的响应式系统收集为依赖。当你点击按钮切换 b 的值时，watchEffect 不会重新执行。

跳转到 Vue演练场 查看效果。

错误示例 2

<script setup lang="ts">
import { ref, watchEffect } from 'vue'

const a = ref(1)
const b = ref(false)

watchEffect(() => {
  if (b.value) {
    console.log('a的值: ' + a.value)
  }

  console.log('执行了watchEffect')
})
</script>

<template>
  <button @click="a++">点我</button>

  <p>a的值：{{ a }}</p>
  <p>b的值：{{ b }}</p>
</template>

错误原因

在 watchEffect 收集依赖时，发现 b.value 是 false，所以就没有收集到 a.value 的依赖。当你点击按钮切换 a 的值时，watchEffect 不会重新执行。

跳转到 Vue演练场 查看效果。

---

远方大佬的讲解: 抖音：watchEffect竟然不会执行