vue深度监听(监听对象和数组的改变)与立即执行监听实例

Vue.js 是一个非常流行的前端框架，它提供了很多方便的数据监听和响应式机制，其中包括深度监听和立即执行监听。下面将详细介绍这两种监听方式的用法和示例。

Vue 深度监听

Vue 的深度监听可以在属性改变时触发回调函数，包括对象和数组的改变。Vue 提供了 watch API 来实现深度监听，它可以监听一个对象的所有属性变化，同时也可以监听数组的变化。下面是一个示例：

const vm = new Vue({
  data: {
    person: {
      name: '张三',
      age: 20,
      address: {
        province: '北京',
        city: '北京市',
        district: '朝阳区'
      }
    },
    items: ['item1', 'item2', 'item3']
  },
  watch: {
    // 深度监听 person 对象中的属性变化
    'person': {
      handler(newVal, oldVal) {
        console.log('person 改变了：', newVal, oldVal)
      },
      deep: true
    },
    // 深度监听 items 数组的变化
    'items': {
      handler(newVal, oldVal) {
        console.log('items 改变了：', newVal, oldVal)
      },
      deep: true
    }
  }
})

vm.person.name = '李四' // 输出：person 改变了： { name: '李四', age: 20, address: { province: '北京', city: '北京市', district: '朝阳区' } } { name: '张三', age: 20, address: { province: '北京', city: '北京市', district: '朝阳区' } }
vm.person.address.city = '上海市' // 输出：person 改变了： { name: '李四', age: 20, address: { province: '北京', city: '上海市', district: '朝阳区' } } { name: '李四', age: 20, address: { province: '北京', city: '北京市', district: '朝阳区' } }
vm.items.push('item4') // 输出：items 改变了： [ 'item1', 'item2', 'item3', 'item4' ] [ 'item1', 'item2', 'item3' ]

在上面的示例中，我们使用 watch API 来监听 person 对象和 items 数组的变化，设置 deep: true 可以深度监听属性和数组元素的变化，从而触发回调函数。

立即执行监听实例

除了深度监听外，Vue 还提供了立即执行监听实例（即 immediate 参数），它可以在监听对象/数组时立即执行一次回调函数，并返回一个取消监听的函数。下面是一个示例：

const vm = new Vue({
  data: {
    count: 0
  },
  created() {
    const unwatch = this.$watch('count', (newVal, oldVal) => {
      console.log('count 变化了：', newVal, oldVal)
    }, {
      immediate: true // 立即执行回调函数
    })

    // 取消监听
    setTimeout(() => {
      unwatch()
    }, 5000)
  }
})

vm.count = 1 // 输出：count 变化了： 1 0
vm.count = 2 // 输出：count 变化了： 2 1
vm.count = 3 // 输出：count 变化了： 3 2

在上面的示例中，我们使用 $watch API 来监听 count 属性的变化，设置 immediate: true 可以在监听时立即执行一次回调函数，从而输出属性的初始值。此外，我们还调用了返回的取消监听函数 unwatch 来取消监听，该函数在 5 秒后执行。

可以看到，立即执行监听实例可以方便地实现一些需要在监听时立即执行的操作，同时也可以手动取消监听来节省系统资源。

总结：Vue 提供了强大的深度监听和立即执行监听实例，可以在处理对象/数组属性变化时非常方便。我们可以使用 watch API 来设置监听选项，使用 $watch API 来创建监听实例，并根据需要设置监听选项，以处理对象和数组的改变。