面试题：Vue 如何监听对象或数组某个属性的变化？

在 Vue 中，默认情况下，Vue 的响应式系统无法直接监听对象或数组某个属性的变化（如对象新增属性或数组通过索引修改元素）。为了监听这些变化，Vue 提供了一些特殊的方法和 API。

1. 监听对象属性的变化

方法 1：使用 `Vue.set` 或 `this.$set`

Vue.set 或 this.$set 用于向响应式对象中添加一个新属性，并确保这个属性是响应式的。

示例：

export default {
  data() {
    return {
      user: {
        name: 'John',
      },
    };
  },
  methods: {
    addAge() {
      // 使用 Vue.set 或 this.$set 添加新属性
      this.$set(this.user, 'age', 25);
    },
  },
};

说明：

Vue.set(target, key, value) 或 this.$set(target, key, value) 可以动态添加响应式属性。
target：目标对象。
key：属性名。
value：属性值。

方法 2：使用 `Vue.delete` 或 `this.$delete`

Vue.delete 或 this.$delete 用于删除响应式对象的属性，并触发视图更新。

示例：

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    };
  },
  methods: {
    removeAge() {
      // 使用 Vue.delete 或 this.$delete 删除属性
      this.$delete(this.user, 'age');
    },
  },
};

说明：

Vue.delete(target, key) 或 this.$delete(target, key) 可以删除响应式属性。
target：目标对象。
key：属性名。

方法 3：使用 `watch` 监听对象属性

如果需要监听对象某个属性的变化，可以使用 watch。

示例：

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    };
  },
  watch: {
    'user.age': function (newVal, oldVal) {
      console.log('age changed:', newVal, oldVal);
    },
  },
};

说明：

使用 watch 监听对象属性的变化。
注意：如果属性是动态添加的，需要确保属性是响应式的（使用 Vue.set）。

2. 监听数组的变化

方法 1：使用 `Vue.set` 或 `this.$set`

Vue.set 或 this.$set 也可以用于修改数组的某个元素，并确保修改是响应式的。

示例：

export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange'],
    };
  },
  methods: {
    updateItem(index, newValue) {
      // 使用 Vue.set 或 this.$set 修改数组元素
      this.$set(this.list, index, newValue);
    },
  },
};

说明：

直接通过索引修改数组元素（如 this.list[0] = 'grape'）不会触发视图更新。
使用 Vue.set 或 this.$set 可以确保修改是响应式的。

方法 2：使用数组的变异方法

Vue 对数组的以下变异方法进行了拦截，调用这些方法可以触发视图更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

示例：

export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange'],
    };
  },
  methods: {
    addItem(newItem) {
      // 使用数组的变异方法
      this.list.push(newItem);
    },
  },
};

说明：

直接调用这些方法可以触发视图更新。

方法 3：使用 `watch` 监听数组

如果需要监听数组的变化，可以使用 watch。

示例：

export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange'],
    };
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        console.log('list changed:', newVal, oldVal);
      },
      deep: true, // 深度监听
    },
  },
};

说明：

使用 watch 监听数组的变化。
设置 deep: true 可以深度监听数组内部的变化。

3. 总结

监听对象属性变化：
- 使用 Vue.set 或 this.$set 添加响应式属性。
- 使用 Vue.delete 或 this.$delete 删除响应式属性。
- 使用 watch 监听对象属性的变化。
监听数组变化：
- 使用 Vue.set 或 this.$set 修改数组元素。
- 使用数组的变异方法（如 push、splice 等）。
- 使用 watch 监听数组的变化。