学习笔记记录（内容来源于官网）

watch

vue3watch用法和vue变化也不是特别大，vue3支持侦听多个数据源

用法没太大变化：wach是一个钩子函数，支持传入三个参数（个人理解）

1、监听对象

2、回调函数（可以拿到当前值，和上一次的值）

3、对象：是否深度监控属性变化等{deep:true}

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
}，{
  deep:true
})

 侦听多个源（用法和单个没什么太大区别，只是改为数组的方式）

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

watchEffect

官方：为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 方法。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

停止侦听

显示调用返回值停止监听

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

总结：

1、不需要手动传入依赖，每次初始化时会执行一次回调函数来自动获取依赖（watchEffect 不须要指定监听的属性，他会自动的收集依赖， 只要回调中引用到了 响应式的属性， 那么当这些属性变动的时候，这个回调都会执行，而 watch 只能监听指定的属性而作出变动）

2、无法获取到原值，只能得到变化后的值