今天要說說的是 Composition API 中 新增加的 WatchEffect ，我們可以姑且把它看作是 watch 和 computed 的結合體。

watchEffect 特別的地方在於 : 我們不必指定要監聽的變數，只要對應的雙向綁定資料有所變動，就會執行了。

<div id="app"> {{ watchText }}  // 去買蛋餅
    <input type="text" v-model="productName">
    <br>
    <input type="text" v-model="product.name">
</div>

const { createApp,ref,watchEffect } = Vue
const app = createApp({
    setup(){
        // 純值
        const productName = ref("蛋餅")
        // 物件
        const product = ref({
        name:"蛋餅",
        price:"30"
        })
        const watchText = ref("")
        
        watchEffect(()=>{
           // console.log('1.純值監聽 :', productName.value)
           // console.log('2.物件監聽:', product.value.name)
           watchText.value = `去買 ${product.value.name}` 
        })

        return{
            productName,
            product,
            watchText
        }
    }
})
app.mount(#app)

watchEffect 還可以停止監聽?

當我們使用 watch 監聽變數時，watch 是不能被停止的。但 watch Effect 可以。
若想要解除監聽，我們需要將 watchEffect 賦值給一個變數，然後再呼叫一次就可以了。

let num = 0
const stopWatchEffect = watchEffect(()=>{
   watchText.value = `去買 ${product.value.name}` ;
   num++; // 計算觸發次數
})
  // 假如觸發時次就停止監聽
  if(num === 10){
      stopWatchEffect() // 呼叫停止監聽
  }

watch & watchEffect 的差異在哪呢?

關於 watch

1. watch 可以監聽特定變數。雖然 watchEffect 在撰寫上更具有彈性，但說到監聽特定變數還是 watch 比較嚴謹。
2. 當值有所變動，watch 可以取得修改之前的狀態。(oldValue, newValue)，但 watchEffect 就不行。
3. watch 的值要有所變動才會觸發

關於 watchEffect

1. watchEffect 在使用上比較隨性
2. watchEffect 不用來監聽特定變數，只要有雙向綁定的變數，他都可以監聽到。
3. watchEffect 在初始setup()的時候，就會預設先執行一次了。
4. watchEffect 可以被停止。

參考資料:
Vue3 - 每天來一點雷 Part 2
Day_20 : 讓 Vite 來開啟你的Vue 之 watch & watchEffect