watchEffect & watch

2021-10-10 309 阅读1分钟

1、watchEffect

setup() {
  const count = ref(1);

  // 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
  watchEffect(() => {
    console.log(count.value);
  });

  setTimeout(() => {
    count.value++;
  }, 100);
}

2、watch

1、侦听单一数据源
    setup() {
      const state = reactive({ count: 1 });
      // 侦听器数据源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref：
      watch(
        () => state.count,
        (count, prevCount) => {}
      );
      const refCount = ref(1);
      watch(refCount, (refCount, prevRefCount) => {});
    }
2、侦听多个数据源：侦听器还可以使用数组以同时侦听多个源：
    watch([fooRef, barRef, ...], cb)

watch 与 watchEffect 在手动停止侦听、清除副作用 (将 onInvalidate 作为第三个参数传递给回调)、刷新时机和调试方面有相同的行为。

与 watchEffect 相比，watch 允许我们：
- 惰性地执行副作用；
- 更具体地说明应触发侦听器重新运行的状态；
- 访问被侦听状态的先前值和当前值。

watchEffect & watch

#