const x = ref(0)
const y = ref(0)

// 單個 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函數(shù)
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多個來源組成的數(shù)組
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

// 提供一個 getter 函數(shù)
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  },
  // 立即執(zhí)行
  { immediate: true }
)

const obj = reactive({ count: 0 })

// 錯誤，因為 watch() 得到的參數(shù)是一個 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

const todoId = ref(0)
watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

setup() {
  const { reactive, watchEffect } = vue;
  const data = reactive({ name:'lei' })

  const stop = watchEffect( () => {  // 返回值 stop 用來停止監(jiān)聽
    console.log( data.name )  // 頁面加載時執(zhí)行一次之后，當(dāng) data.name 改變時，將會再次執(zhí)行l(wèi)og

    setTimeout( () => {
      stop();  //5秒之后停止此監(jiān)聽
    }, 5000 )
  })
}

const { reactive, watch, ref } = vue;
const name = ref('yang')
// ref包裝過的可直接通過watch的第一個參數(shù)傳入
watch( name, (newValue,oldValue) => { //  第一個參數(shù) 需要監(jiān)聽的數(shù)據(jù)
  console.log(newValue)  // 新值
  console.log(newValue)  // 舊值
}，{ immediate: true }) //  第三個參數(shù)可接受配置項

const data = reactive({ name:'lei', age:18 })
// 但是 reactive 包裝過的值不可以直接傳入，可使用箭頭函數(shù) return 出需要監(jiān)聽的數(shù)據(jù)
watch( () => data.name, (newValue,oldValue) => { //  第一個參數(shù) 需要監(jiān)聽的數(shù)據(jù)
  console.log(newValue)  // 新值
  console.log(newValue)  // 舊值
}，{ immediate: true }) //  第三個參數(shù)可接受配置項

const data = reactive({ name:'lei', age:18 })
// 可用數(shù)組接收參數(shù)
watch( [() => data.name, () => data.age], ([newName, newAge], [oldName, oldAge]) => { 
  console.log(newName, newAge)  // 新值
  console.log(oldName, oldAge)  // 舊值
})