问题
Vue3 里面使用 watchEffect 函数，首次渲染会触发。
const { createApp, watchEffect, reactive, toRefs, watch } = Vue;
createApp({
setup() {
const state = reactive({
title: 'test',
});
watchEffect(() => {
console.log('watchEffect', state.title)
});
}
}).mount('#app')
原因
watchEffect 在首次跟踪依赖的时候和后续数据变更的时候也会触发。其功能类似于 watch 的 immediate 为 true 的情况。
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')
可以看出， watchEffect 跟 watch 配置了 immediate 都是首次渲染的时候会触发。
解决
watchEffect 替换为 watch 函数即可
