如果我運行此代碼：
const state = reactive({
title: '',
})
watchEffect(() => {
console.log(state.title)
})
watchEffect被觸發并且控制臺輸出一個空的string：
""
如果我想為 分配一個新值state.title，watchEffect則會觸發兩次。這種行為是預期的還是我做錯了什么？
uj5u.com熱心網友回復：
根據檔案，watchEffect
立即運行一個函式[強調添加]，同時反應性地跟蹤它的依賴關系，并在依賴關系發生變化時重新運行它。
所以預計在這種情況下它應該運行兩次：第一次定義時，然后在值更改時再次運行。
uj5u.com熱心網友回復：
正如@MykWillis 指出并在檔案中明確說明的那樣，watchEffect立即運行并在隨后的更改中運行，完全watch一樣{ immediate: true }。
如果您不希望效果最初運行，請不要使用watchEffect，watch而是使用：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/444706.html
標籤：javascript Vue.js Vuejs3 手表