Vue3如何从其他函数中主动显式调用watch监听函数？

watch 本身没有提供主动触发的内置API，你可以通过将监听回调逻辑抽为独立公共函数的方式实现需求，同时可以额外存储上一次的取值来判断是否发生变更，完全符合你要的调用逻辑。

修改后的可运行代码如下：

<template>
  <input type="text" v-model="userInput" />
  <button @click="isChanged">检查是否变更</button>
  <p></p>
</template>

<script>
import { watch, ref } from "@vue/runtime-core";

export default {
  setup() {
    const userInput = ref("");
    // 存储上一次的值，用于对比判断是否变更
    const lastInputVal = ref("");

    // 把原来watch里的逻辑抽为独立公共函数
    const handleInputChange = () => {
      const isDataChanged = userInput.value !== lastInputVal.value;
      if (isDataChanged) {
        console.log("检测到值变更，新值为：", userInput.value);
        // 更新存储的上一次值
        lastInputVal.value = userInput.value;
      }
      return isDataChanged;
    };

    const isChanged = ()=> {
      // 主动调用逻辑，拿到是否变更的结果
      const changeResult = handleInputChange();
      console.log("是否变更：", changeResult);
      return changeResult;
    }

    // 保留原本的自动监听能力，值变更时自动触发
    watch(userInput, handleInputChange);

    return {
      userInput,
      isChanged,
    };
  },
};
</script>

如果不需要保留自动监听的能力，只需要点击时判断是否变更，也可以直接去掉watch声明，只保留手动调用handleInputChange的逻辑即可。

内容的提问来源于stack exchange，提问作者seeman