Vue2 如何监听数组与对象

在Vue2的开发中，对数据的监听是实现响应式的关键。尤其在处理数组和对象这类复杂数据结构时，掌握正确的监听方法至关重要。

监听对象

Vue2使用Object.defineProperty()方法来进行数据劫持，实现对对象属性的监听。当我们创建一个Vue实例并在其data选项中定义一个对象时，Vue会自动递归遍历该对象的所有属性，并为每个属性添加getter和setter方法。

例如：

<template>
  <div>{{ user.name }}</div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: 'John'
      }
    };
  },
  watch: {
    'user.name': function(newVal, oldVal) {
      console.log('name changed from', oldVal, 'to', newVal);
    }
  }
};
</script>

在上述代码中，通过watch选项监听了user.name属性的变化。

监听数组

Vue2对数组的监听做了特殊处理，因为Object.defineProperty()无法检测到数组长度的变化和通过索引直接修改数组元素的操作。Vue2重写了数组的一些方法，如push、pop、shift、unshift、splice、sort和reverse，使得这些方法在操作数组时能够触发视图更新。

示例如下：

<template>
  <div v-for="item in items" :key="item">{{ item }}</div>
</template>
<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    };
  },
  watch: {
    items: {
      handler(newVal, oldVal) {
        console.log('items changed', newVal, oldVal);
      },
      deep: true
    }
  }
};
</script>

这里通过watch监听items数组的变化，deep: true表示深度监听数组的变化。

总结

在Vue2中监听数组和对象需要注意它们的特性和监听方式的差异。对于对象，直接使用watch监听属性即可；对于数组，要注意使用Vue2重写的方法来操作数组以触发更新，同时可以通过deep选项进行深度监听。正确地监听数组和对象的变化能够确保我们的Vue应用数据的响应式更新，为用户提供流畅的交互体验。