antfu/reactivue

`watchEffect` effect does not run when expected

crutchcorn opened this issue · 0 comments

While doing some testing, I noticed that watchEffect does not seem to run the side effects when it would otherwise be expected to. Changing the example-vite/src/basic/useSetup.tsx to add the following LOC:

watchEffect(() => console.log('watchEffect', counter.value));

I noticed that the console.log never runs, even when counter.value is updated.

Full example
import React from 'react'
import { useSetup, ref, computed, watch, watchEffect } from 'reactivue'

export function Counter(Props: { value: number }) {
  const state = useSetup(
    (props) => {
      const counter = ref(props.value)

      const inc = () => (counter.value += 1)
      const dec = () => (counter.value -= 1)
      const doubled = computed(() => counter.value * 2)
      const isFive = ref(false)

      watch(() => props.value, v => (counter.value = v))
      watch(counter, v => (isFive.value = v === 5), { immediate: true })

      watchEffect(() => console.log('watchEffect', counter.value));

      return { counter, inc, dec, doubled, isFive }
    },
    Props,
  )

  const { counter, inc, doubled, dec, isFive } = state
  return (
    <div className="card">
      <p>useSetup()</p>
      <button onClick={dec}>dec -</button>
      <button onClick={inc}>inc +</button>
      <table>
        <tbody>
          <tr><td>Counter</td><td>{counter}</td></tr>
          <tr><td>isFive</td><td>{JSON.stringify(isFive)}</td></tr>
          <tr><td>Doubled</td><td>{doubled}</td></tr>
        </tbody>
      </table>
    </div>
  )
}