Vue3中watch和watchEffect的用法

// watch和watchEffect
const x = ref(0)
const y = ref(0)
// 监听ref
watch(x, (val) => {
  console.log('监听x变化=' + val)
})
// 监听 getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log('监听x和y变化后计算和=' + sum)
  }
)
// 监听多个来源组成的数组
watch([x, y], ([newX, newY]) => {
  console.log('监听x变化=' + newX)
  console.log('监听y变化=' + newY)
})

setTimeout(() => {
  x.value = 5
  y.value = 6
}, 2000)
// 不能直接侦听响应式对象的属性值,相当于传了一个number值，无法监听
const obj = reactive({ count: 10 })
watch(obj.count, (c) => {
  console.log('普通监听count变化了=' + c)
})
// 需要监听响应式对象的属性值，就需要监听getter函数
watch(
  () => obj.count,
  (c) => {
    console.log('监听getter函数count变化了=' + c)
  }
)
// 给watch传入一个响应式的对象，会隐式的创建一个深层监听器，会监听这个对象所有的属性变化,

watch(obj, (o) => {
  console.log('深层监听器count变化了=' + o.count)
})
// 如果要显式的使用深层监听器，需要传入{deep:true}的配置项，监听响应式对象，如果对象嵌套复杂，会影响性能消耗
watch(
  () => obj,
  (o) => {
    console.log('显式深层监听器count变化了=' + o.count)
  },
  { deep: true }
)
obj.count = 9
// watch()是懒执行的：仅在侦听源变化时，才会执行回调
// ================================================================
// 如果想创建侦听器后立即执行监听，就需要使用watchEffect,它会在创建时自动追踪访问到的属性变化

const effect = reactive({ name: 'zs', age: 18 })
// 默认会监听打印zs,name变化后会再次打印李素，监听会掉中不要使用异步，这会让默认监听变的无效
watchEffect(() => {
  console.log('创建后自动监听属性name=' + effect.name)
})
effect.name = '李素'
// 默认情况下，创建的监听器都会在vue更新页面前调用。这就意味着你在侦听器中访问dom是更新前的状态，要访问更新后的dom，就需要显式的使用配置flush:'post'或者watchPostEffect
watch(
  () => obj.count,
  (c) => {
    console.log('watch页面更新后的监听' + c)
  },
  { flush: 'post' }
)
watchEffect(
  () => {
    console.log('watchEffect页面更新后的监听' + obj.count)
  },
  { flush: 'post' }
)
watchPostEffect(() => {
  console.log('watchPostEffect页面更新后的监听' + obj.count)
})
obj.count = 100
// 同步创建的侦听器会自动绑定到宿主实例上，宿主销毁侦听器自动结束。
// 异步创建的侦听器不会自动绑定到宿主的实例上，需要手动结束
let unwatch = null
setTimeout(() => {
  unwatch = watch(
    () => obj,
    (o) => {
      console.log('异步侦听器器' + o.count)
    }
  )
}, 1000)
onBeforeUnmount(() => {
  if (unwatch != null) unwatch()
})
setTimeout(() => {
  obj.count = 300
}, 3000)