vue如何监听数组对象中属性值的变化

Vue可以通过watch选项来监听数组对象中属性值的变化。为了发现对象内部值的变化，可以在选项参数中指定deep为true。以下是具体的实现方法：

const vm = new Vue({
  data() {
    return {
      info: {
        a: 1,
        b: 2,
        c: 3
      }
    }
  },
  watch: {
    'info.a': {
      handler(newVal) {
        console.log(newVal);
      },
      deep: true
    }
  }
});

在上述代码中，我们通过设置`'info.a'`来监听`info`对象中的`a`属性值的变化。当`info.a`发生变化时，会执行`handler`函数并打印出新的值。

相关问题

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` 函数将会调用我们传递的回调函数。

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

vue2监听对象和vue3监听对象数组

在 Vue.js 中，监听数据变化有两方面的区别，一个是 Vue 2 版本，另一个是 Vue 3 版本。

**Vue 2：**
Vue 2 使用 `vm.$watch` 或者 `v-on` 指令来监听对象或数组的变化。例如，对于对象：

let obj = { prop: 'initial' };
var vm = new Vue({
  data: {
    myObj: obj
  },
  watch: {
    'myObj.prop': function(newVal, oldVal) {
      console.log('Prop changed:', newVal);
    }
  }
});

这里通过 `watch` 对象属性的键路径进行监听。

对于数组：

let arr = ['item1', 'item2'];
vm.$watch('myArr', (newVal, oldVal) => {
  console.log('Array changed:', newVal);
}, { deep: true }); // 如果需要深度监听，传入 `{ deep: true }`

`$watch` 需要传入监听的目标以及回调函数。

**Vue 3：**
Vue 3 引入了响应式系统，通过 `ref`、` reactive` 等创建的数据会自动跟踪变化。监听对象可以这样做：

import { ref } from 'vue';
const obj = ref({ prop: 'initial' });
// 直接访问值变化就会触发更新
obj.value.prop = 'new value';

// 或者使用 computed 和 watch
const myObj = obj.value;
watch(myObj, (val) => {
  console.log('Prop changed:', val);
});

对于数组，同样推荐使用 `reactive`：

const arr = reactive(['item1', 'item2']);
arr.push('item3'); // 自动跟踪变化

`watch` 可以直接作用于数组或响应式的对象上，不需要设置 `deep` 参数。