vue2watch监听refs

在Vue 2中，`watch` 钩子可以用来监听数据变化，包括对 `ref` 对象的值的变化。`ref` 是Vue提供的响应式属性，它允许你创建一个具有读取和设置值的对象，并且当值改变时会自动更新视图。

如果你有一个使用 `ref` 创建的引用，例如：

const myInputRef = ref(null);

你可以通过 `watch` 监听 `myInputRef.value` 的变化，就像这样：

watch(
  {
    handler: (newVal) => {
      console.log('Input value changed:', newVal);
    },
    deep: true, // 如果需要深度监听嵌套对象
    immediate: true, // 初始化时也立即执行
  },
  (oldVal) => {
    if (oldVal !== undefined && oldVal !== newVal) {
      console.log('Input value updated from', oldValue, 'to', newVal);
    }
  },
  { target: myInputRef } // 观察的是 myInputRef 的值而不是其引用
);

当你给 `ref` 对象赋值或 `input` 元素的值发生改变时，上述 `watch` 函数会被触发。记得在配置 `watch` 时指明观察的目标是 `myInputRef` 而不是它的引用。