vue3 ref watch监听

在Vue 3中，`ref` 和 `watch` 都是处理数据响应式的重要工具。

`ref` 是 Vue 提供的一种原始类型的反应式对象，用于封装可变的数据。你可以创建一个 `ref` 对象并赋值给它，然后对这个引用进行修改，Vue会自动跟踪并更新视图。例如：

const count = ref(0); // 创建一个初始值为0的计数器
count.value++；// 监听并增加计数值，视图会同步更新

`watch` 则是一个更高级的监听器，它可以让你在属性发生变化时执行自定义函数。它的基本语法是：

watch(target, handler, { deep, immediate }) {
  // target 可以是对象、数组或者简单的变量名
  // handler 是当 target 变化时要执行的回调函数
}

- `deep` 参数表示是否深度监听，即是否监测嵌套对象的变化，默认为 false。
- `immediate` 是否立即调用处理器函数，对于初始化状态为 true，首次调用不会触发。

举个例子：

watch(count, (newVal) => console.log('计数器已更新:', newVal)); // 当count改变时，会在控制台打印新值

相关问题

vue2中watch监听ref

在Vue2中，可以使用`watch`选项来监听`ref`的变化。下面是一个示例代码：

var app = new Vue({
  el: '#app2',
  data: {
    child: {
      age: 2
    },
    hasErr: false
  },
  watch: {
    'child.age': function(newVal, oldVal) {
      if (newVal < 3 || newVal > 6) {
        this.hasErr = true;
      } else {
        this.hasErr = false;
      }
    }
  }
});

在上面的代码中，我们定义了一个`watch`选项，它监听了`child.age`这个`ref`的变化。当`child.age`的值发生变化时，`watch`函数会被触发。在这个示例中，我们检查了`child.age`的值是否在3到6之间，如果不在这个范围内，就将`hasErr`设置为`true`，否则设置为`false`。

vue3的watch监听

在 Vue 3 中，`watch` 方法的使用方式与 Vue 2 有一些不同。在 Vue 3 中，`watch` 方法有两种使用方式：基于 `ref` 和基于 `reactive`。

1. 基于 `ref`：

   import { ref, watch } from 'vue';

   const myData = ref(0);

   watch(myData, (newValue, oldValue) => {
     // 监听 myData 的变化，并在变化时执行回调函数
     console.log(`myData 变为 ${newValue}`);
   });

2. 基于 `reactive`：

   import { reactive, watch } from 'vue';

   const myData = reactive({
     count: 0,
     name: 'John',
   });

   watch(() => myData.count, (newValue, oldValue) => {
     // 监听 myData.count 的变化，并在变化时执行回调函数
     console.log(`myData.count 变为 ${newValue}`);
   });

在上述示例中，我们可以看到 `watch` 方法的第一个参数可以是一个响应式对象或一个返回响应式对象的函数。第二个参数是一个回调函数，用于处理变化时的逻辑。回调函数接收两个参数：新值和旧值。

除了基本的用法外，`watch` 方法还支持传递一些选项参数，例如 `immediate`、`deep` 等，用于控制监听行为的细节。你可以查阅 Vue 3 官方文档以了解更多详细信息。