「VueUse」watchPausable 解析，给 watch 装上暂停键本文正在参加「金石计划」。简单介绍 Vu

简单介绍 Vue3 Watch API

Vue3 中的 watch 可以监听一个特定的数据属性，并在该属性变化时执行一些操作。它可以接受一个函数作为参数，该函数将在数据属性发生变化时被调用，该函数可以访问新值和旧值，并执行一些逻辑。

下面是一个使用watch监听数据变化的例子：

import { watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count变化了，新值为：${newVal}，旧值为：${oldVal}`);
});

count.value = 1; // 输出：count变化了，新值为：1，旧值为：0

另外，Vue3 的 watch 还可以返回一个函数，即 stopWatch。stopWatch 函数可以用来停止 watch监听器，如下所示：

javascriptCopy code
import { watch } from 'vue';

const count = ref(0);

const stop = watch(count, (newVal, oldVal) => {
  console.log(`count变化了，新值为：${newVal}，旧值为：${oldVal}`);
});

count.value = 1; // 输出：count变化了，新值为：1，旧值为：0

stop(); // 停止监听

在这个例子中，watch 函数返回一个 stopWatch 函数，我们可以调用该函数来停止 watch 监听器。

设计 watchPausable

watchPausable 在调用上和 watch 没啥区别，也就是说它们的参数都是一样的，唯一的不同是函数被调用的返回值，watch 只返回了 stopWatch，watchPausable 需要在这个基础上返回四个参数：

isActive 一个布尔只读 ref。
pause 函数将isActive 设置为 false，以暂停 watcher。
resume 函数将 isActive 设置为 true，以恢复 watcher。
stop 函数将调用 watch 函数返回的 stop 函数，并将 isActive 设置为 false，以停止watcher。

为了更好维护这个四参数，整体作为对象返回：{ isActive, pause, resume, stop }。

接下来就是利用 Vue3 Watch 和 isActive 来实现核心逻辑：

使用 Vue3 的 watch 函数来监听 source 的变化，并在回调函数中检查 isActive 的值。如果isActive 为 true，则调用传入的回调函数 callback。

实现 watchPausable

watchPausable 和 pausableWatch 函数

编写 watchPausable 函数，接收 source、callback 和 options 三个参数。


import { ref, watch, readonly } from "vue";


export const watchPausable = (
	source,
	callback,
	options,
) => {
	
}

export { watchPausable as pausableWatch };

watchPausable 在 VueUse 中还有一个别名，可以通过别名重命名导出。

isActive

创建一个名为 isActive 的 ref 变量，并将其初始化为 true。它将用于标识 watcher 是否处于活动状态。

import { ref, readonly } from "vue";

export const watchPausable = (
	source,
	callback,
	options,
) => {
	const isActive = ref(true);

	return { isActive: readonly(isActive) };
}

export { watchPausable as pausableWatch };

需要注意的是，isActive 被导出的时候，需要变成只读状态，避免被修改导致程序 bug，我们使用 Vue3 提供的 readonly 函数来实现。

pause 和 resume

pause 函数将 isActive 设置为 false，以暂停 watcher。
resume 函数将 isActive 设置为 true，以恢复 watcher。

const resume = () => {
        isActive.value = true;
}

const stop = () => {
        stopWatch();
        isActive.value = false;
}

核心逻辑

使用 Vue3 的 watch 函数来监听 source 的变化，并在回调函数中检查 isActive 的值。如果isActive 为 true，则调用传入的回调函数 callback。

const stopWatch = watch(source, (...argv) => {
        if (isActive.value) {
                callback(...argv);
        }
}, options);

stop

stop 函数将调用 watch 函数返回的 stop 函数，并将 isActive 设置为 false，以停止watcher。

const stop = () => {
	stopWatch();
	isActive.value = false;
}

OK，整个过程就完成了，现在可以组件里面导入函数检验结果，我制作了线上代码演示：

「VueUse」watchPausable 解析，给 watch 装上暂停键