import { ref, watch } from 'vue'
const count = ref(0)
const price = ref(10)
// 偵聽響應(yīng)式數(shù)據(jù)
watch(count, (newVal, oldVal) => {
    // 每當(dāng)count更新時(shí)，都會(huì)執(zhí)行這里的函數(shù)
    console.log("new count:", newVal) // 1  更新后的值
    console.log("old count:", oldVal) // 0  更新前的值
})
// 偵聽getter函數(shù)
watch(
    () => count.value * price.value,
    (newVal, oldVal) => {
        // 每當(dāng)count或者price更新時(shí)，都會(huì)執(zhí)行這里的函數(shù)
        console.log("新總價(jià):", newVal) // 10  更新后的值
        console.log("舊總價(jià):", oldVal) // 0  更新前的值
    })
// 使用數(shù)組偵聽多個(gè)數(shù)據(jù)源
watch(
    [count, () => price.value],
    (newValArr, oldValArr) => {
        // 每當(dāng)count或者price更新時(shí)，都會(huì)執(zhí)行這里的函數(shù)
        // 需要注意此時(shí)的回調(diào)數(shù)據(jù)為數(shù)組
        // newValArr[0] count
        // newValArr[1] () => price.value]
        // oldValArr 同上
        console.log(newValArr) // [1, 10]  更新后的值
        console.log(oldValArr) // [0, 10]  更新前的值
    })
count.value++ // 更新count值

const count = ref(0)
watch(count, (newVal,oldVal) => {
    console.log(newVal)  // 0
    console.log(oldVal)  // undefind
}, {
    immediate: true  // 創(chuàng)建時(shí)立即執(zhí)行一次回調(diào)
})

const obj1 = reactive({ val: 1 })
watch(obj1, (newVal, oldVal) => {
    // 在obj的嵌套屬性變更時(shí)觸發(fā)
    // 注意此處的newVal oldVal的值是相等的
    // 因?yàn)樗麄兪峭粋€(gè)對象
})
const obj2 = ref({ val: 2 })
// 傳入ref偵聽的對象時(shí)，添加.value才會(huì)默認(rèn)創(chuàng)建深層偵聽
watch(obj2.value, (newVal, oldVal) => {})
obj1.val++
obj2.value.val++

// 當(dāng)直接傳入ref創(chuàng)建的對象或是返回響應(yīng)式對象的getter函數(shù)時(shí)
// 只有在它們的對象被整個(gè)替換時(shí)才會(huì)觸發(fā)回調(diào)
//  例：obj2.value = { val: 3 }
// 傳入deep選項(xiàng)即可創(chuàng)建深層偵聽
// getter函數(shù)
watch(() => obj2.value, (newVal, oldVal) => {
    // 注意此處的newVal oldVal的值是相等的
    // 除非替換掉整個(gè)obj2.value
}, {
    deep: true   // 當(dāng)值變更時(shí)觸發(fā)回調(diào)
})
// ref創(chuàng)建的對象數(shù)據(jù)
watch(obj2, (newVal, oldVal) => {
    // 注意此處的newVal oldVal的值是相等的
    // 除非替換掉整個(gè)obj2.value
}, {
    deep: true   // 當(dāng)值變更時(shí)觸發(fā)回調(diào)
})

import { ref, watchEffect } from 'vue';
const count = ref(0)
watchEffect(() => {
    console.log(count.value) // 0
})

const unwatch = watchEffect(() => { })
// 當(dāng)不需要時(shí)調(diào)用 unwatch() 即可銷毀偵聽
unwatch()

setTimeout(() => {
  // 在同步中創(chuàng)建的偵聽器在組件銷毀時(shí)，自動(dòng)停止，而異步中創(chuàng)建的不會(huì)！
  watchEffect(() => {})
}, 100)

watch(count, ()=>{
}, {
  flush: 'post'
})
watchEffect(()=>{
}, {
  flush: 'post'
})