Vue Watch 侦听对象属性详解

介绍

Vue 中的 Watch 是一个非常有用的功能，它可以监听指定的数据变化，并在变化时执行一些逻辑代码。Watch 可以观察对象、数组和深层嵌套的属性。Watch 是一个特别强大的工具，有了它我们可以方便地做一些数据监控、校验以及一些逻辑的触发等操作。在本篇文章中，我们会详细地介绍如何使用 Vue 的 Watch 模块。

监听对象

如果你需要监听 Vue 实例上某个对象的变化，你可以使用 watch 选项。要监听的对象应该是一个普通的 JavaScript 对象。在监听对象时，可以选择深度监听再对嵌套属性进行检测。

示例代码如下：

<template>
  <div>
    <input v-model="name" placeholder="请输入姓名" >
    <input v-model="person.age" placeholder="请输入年龄">
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      person: {
        name: '张三',
        age: 18
      }
    }
  },
  watch: {
    name: function (value) {
      console.log('姓名变化为', value)
    },
    person: {
      handler: function (value) {
        console.log('数组变化, 变化后的值为', value)
      },
      deep: true  // 深度监听
    }
  }
}
</script>

在上面的例子中，我们在 data 中定义了一个 name 和一个 person 对象。然后在 watch 中监听了 name 和 person 的变化。我们在输入框中输入名字和年龄时，watch 中的对应函数会被调用。如果监听的是一个对象，可以使用 deep: true 开启深度监听。

监听数组

要监听数组变化，需要特别注意。由于 JavaScript 中的限制，Vue 没有办法监控到数组元素的变化。但是，你可以监控到被改变的数组，只要你使用 Vue.set 或者 vm.$set，触发数组的更新。

下面是一个监听 Vue 数组的例子：

<template>
  <div>
    <ul>
      <li v-for="value in list">{{ value }}</li>
    </ul>
    <input v-model="list[0]">
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['Vue', 'React', 'Angular']
    }
  },
  watch: {
    list: function (value) {
      console.log('数组变化, 变化后的值为', value)
    }
  },
  created() {
    // 可以使用 Vue.set 或 vm.$set，或者数组的索引设置新值
    // Vue.set(this.list, 1, 'React Native')
    // this.$set(this.list, 2, 'jQuery')
    // this.list[2] = 'jQuery'
  }
}
</script>

注意，在以上的例子中，我们先在 data 中的 list 属性预设了一个初始值。在 created 钩子函数中，我们可以使用 Vue.set 或者 vm.$set，触发数据的更新。如果你不想使用这些方法，可以直接设置数组索引来更新数据。