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?
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.
As @MykWillis pointed out and is clearly stated in the docs, watchEffect runs immediately and on subsequent changes, exactly as watch with { immediate: true } would.
If you do not want the effect to run initially, don't use watchEffect, use watch instead:
const { createApp, watchEffect, reactive, toRefs, watch } = Vue;
createApp({
setup() {
const state = reactive({
title: 'test',
});
watchEffect(() => {
console.log('watchEffect', state.title)
});
watch(() => state.title, () => {
console.log('watch', state.title)
});
watch(() => state.title, () => {
console.log('watch.immediate', state.title)
}, { immediate: true })
return { ...toRefs(state) }
}
}).mount('#app')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
<input v-model="title">
</div>