javascriptvue.jsvuejs3watch

WatchEffect is triggered twice when watching a reactive object

If I run this code:

const state = reactive({
    title: '',
})

watchEffect(() => {
    console.log(state.title)
})

watchEffect is triggered and the console is outputting an empty string:

""

If I want to assign a new value to state.title, watchEffect is triggered twice. Is this behaviour expected or am I doing something wrong?

Solution

  • According to the documentation, watchEffect

    Runs a function immediately [emphasis added] while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.

    So it is expected that it should run twice in this situation: once when it is first defined, and then again when the value changes.