Skip to content

Stale computed variable under Vue 3.5ย #13832

@cj1128

Description

@cj1128

Vue version

3.5.20

Link to minimal reproduction

https://gist.github.com/cj1128/49cb31b1f226882d45e9ba7035ea2d93

Steps to reproduce

Run this code under Vue 3.5.20.

import { ref, computed, watchEffect } from "vue"

const T = ref(false)

const A = computed(() => {
  if (T.value) {
    return B.value % 2 === 0 ? 2 : 3
  } else {
    return 1
  }
})

const B = computed(() => {
  return A.value + 1
})

watchEffect(() => {
  console.log("====")
  console.log("A", A.value)
  console.log("B", B.value)
})

setTimeout(() => {
  T.value = true
}, 100)

// output
/*
====
A 1
B 2
====
A 2
B 2
*/

What is expected?

after setting T.value = true, A's value should be 2 and B's value should be 3, or B's value should be always A's value + 1.

What is actually happening?

B's value is stale.

System Info

Any additional comments?

Vue 3.4 will report error Unhandled error during execution of scheduler flush about this case which is better IMO because at least it reminds developers to check the code.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions