Subscribe on changes!

watch callback has something side effect when calling `createApp` in the callback

avatar
Sep 23rd 2022

Vue version

3.2.39

Link to minimal reproduction

SFC Playground

Steps to reproduce

  1. Open the demo@vue3.2.39
  2. After clicking it, log 1,1,2,2 will appear

CleanShot 2022-09-23 at 18 01 40

What is expected?

  1. open the demo@vue3.2.37
  2. After clicking it, log 1,2,1,2 will appear

CleanShot 2022-09-23 at 18 04 21

What is actually happening?

Log: 1, 1, 2, 2

System Info

No response

Any additional comments?

No response

avatar
Sep 23rd 2022

A new problem after #6614 fixed

avatar
Oct 1st 2022

Workaround:

watch(
  () => isActive.value,
  (v) => {
    if (v) {
     loadData()
    }
  },
  // use post
  { flush: 'post' }
)
avatar
Oct 11th 2022

Workaround:

watch(
  () => isActive.value,
  (v) => {
    if (v) {
     loadData()
    }
  },
  // use post
  { flush: 'post' }
)

this workaround seems no work,vue will flush pre end post job when render a new component in vue 3.2.39

avatar
Nov 2nd 2023

As a workaround, use a sync flush watcher:

watch(
  () => isActive.value,
  v => {
    // ...
  },
  { flush: 'sync' }
)