代碼

<template><div>Counter: {{ counter }}</div><div>Double Counter: {{ doubleCounter }}</div>
</template><script setup lang="ts">
import { ref, computed } from "vue";const counter = ref(0);const doubleCounter = computed(() => {console.log("doubleCounter computed");return counter.value * 2;
});setTimeout(() => {counter.value = 1;
}, 1000);// 直接引用 doubleCounter
doubleCounter;
</script>

---

問題

1. 代碼運行時，console.log("doubleCounter computed") 會被打印幾次？為什么？

   • 如果不會打印，請說明原因。
   • 如果會打印，請描述每次打印的時機。

2. 如果將 doubleCounter; 替換為 console.log(doubleCounter.value);，會發生什么變化？

   • 分析控制臺的輸出結果，并解釋原因。

3. 如果在模板中移除 {{ doubleCounter }}，會對代碼的行為產生什么影響？

   • 分析 console.log("doubleCounter computed") 的打印次數和時機。

4. 如何修改代碼以確保 console.log("doubleCounter computed") 在初始渲染和 counter 更新時都被打印？

---

答案提示

1. 初次運行時

   • 控制臺會打印 "doubleCounter computed"并在 counter 更新時再次打印。

2. 替換為 console.log(doubleCounter.value); 后

   • 訪問 doubleCounter.value 會觸發computed的回調函數。
   • 控制臺會打印 "doubleCounter computed"，并在 counter 更新時再次打印。

3. 移除模板中的 {{ doubleCounter }}

   • 模板不再讀取 doubleCounter.value，因此 computed 的回調函數不會被觸發。
   • 即使 counter 更新，也不會打印 "doubleCounter computed"。

4. 確保打印的修改方式

   • 在模板中保留 {{ doubleCounter }}，或者在腳本中顯式訪問 doubleCounter.value（如通過watch或其他邏輯）。

總結

console.log(“doubleCounter computed”) 被打印的前提是以下任意一種情況：
- 訪問 doubleCounter.value：顯式讀取 computed 屬性的值。
- 在模板中使用 doubleCounter：Vue 自動讀取 doubleCounter.value。

---

通過這道題目，開發者可以深入理解 Vue 的響應式系統、computed屬性的工作原理，以及依賴追蹤的觸發條件。