vue3笔记（7）监听

这篇记录vue组件的属性，以及computed, watch, watchEffect的使用区分。

定义

computed

computed是计算属性，依赖其它属性值。
computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算。
接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象

const count = ref(1)
const plusOne = computed(() => count.value + 1)

接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

watch

watch更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作。
需要侦听特定的数据源，并在单独的回调函数中执行副作用。
默认情况下，它是惰性的——即回调仅在侦听源发生变化时被调用。

const num = ref(1);
watch(num, () => { return `${num.value}`});
watch(() => num.value, () => {}); //有返回值的getter函数
watch([a, b], ([a, b], [prevA, prevB]) => {}); //多个源

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

watchEffect((onInvalidate) => {
  onInvalidate(() => {})
})

watch VS watchEffect

watch 与 watchEffect 在以下方面相同：

1. 手动停止侦听
2. 清除副作用 (将 onInvalidate 作为第三个参数传递给回调)
3. 刷新时机和调试。

与 watchEffect 相比，watch 允许我们：

1. 惰性地执行副作用
2. 更具体地说明应触发侦听器重新运行的状态
3. 访问被侦听状态的先前值和当前值

运用场景

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 (访问一个API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

附录

官方文档 Computed 与 watch