vue3中watch监听对象某一个属性

在Vue3中，可以使用`watch`函数来监听对象中的某一个属性。具体实现方法如下：

1. 首先需要引入`watch`函数：

import { watch } from 'vue';

2. 然后在组件中使用`watch`函数来监听对象中的某一个属性：

watch(
  () => obj.prop, // 监听的属性
  (newVal, oldVal) => {
    // 回调函数
    console.log(`new value: ${newVal}, old value: ${oldVal}`);
  }
);

其中，`obj`是要监听的对象，`prop`是要监听的属性名。当`prop`的值发生变化时，回调函数就会被触发。

需要注意的是，如果要监听的属性是一个对象或数组，需要使用`deep`选项来深度监听：

watch(
  () => obj.prop,
  (newVal, oldVal) => {
    console.log(`new value: ${newVal}, old value: ${oldVal}`);
  },
  { deep: true }
);

相关问题

vue3中watch监听对象某一个属性 新旧值都能监听吗

在Vue 3 中，`watch` API 可以用来监听视图层（数据对象）的变化。当你想要监听对象的某个属性是否有新值或旧值改变时，可以直接在 `watch` 函数里处理。Vue 提供了两个语法：

1. **深度监听（deep）**：默认情况下，`watch` 对象级别的变动是浅监听，这意味着只有直接修改的对象才会触发。如果你想对嵌套对象或数组的变更也进行监听，需要传递 `immediate: true` 和 `deep: true` 参数：

watch(
  {
    myObject: {
      handler(newVal, oldVal) {
        console.log('new value:', newVal);
        console.log('old value:', oldVal);
      },
      deep: true,
      immediate: true,
    },
  },
  () => { /* 更新后的回调 */ }
)

这里的 `newVal` 就是新值，`oldVal` 是旧值。

2. **get/set访问器**：另一种方式是使用getter和setter，这样在属性被访问或赋值时都会被调用：

export default {
  data() {
    return {
      myObject: {},
    };
  },
  watch: {
    'myObject': {
      get() {
        console.log('get new value:', this.myObject);
      },
      set(newVal) {
        console.log('set new value:', newVal);
      },
    },
  },
}

这里`get`会在每次取值时打印新值，`set`会在值被更改时打印新值。

vue3中watch监听数组对象属性

在 Vue3 中，您可以使用 `watch` 函数来监听数组对象属性的变化。

假设您有一个数组对象 `arr`，其中包含一个 `name` 属性，您可以使用以下代码来监听该属性的变化：

import { watch } from 'vue';

// 假设您已经有一个名为 arr 的数组对象
watch(() => arr.map(item => item.name), (newVal, oldVal) => {
  // 处理新值和旧值的变化
});

在上面的代码中，我们使用 `watch` 函数来监听 `arr` 数组对象中所有元素的 `name` 属性。我们使用 `map` 函数来获取一个新的只包含 `name` 属性的数组。当该数组发生变化时，`watch` 函数将会调用我们传递的回调函数。

在回调函数中，您可以处理新值和旧值的变化。