Vue监听器watch

1. watch的作用

​ Vue提供的一种监听数据的变化的方法，可以在数据变化时执行相关指令或者方法来响应数据变化。

2. watch的简单使用

<template>
  <el-input v-model="input" />
</template>
<script>
export default {
  data() {
    return {
      input: ''
    };
  },
  watch: {
    // 方式一
    input(value, oldValue) {
      // 相关代码...
    },

    // 方式二
    input: {
        handler(value, oldValue) {
        // 相关代码...
        }
    }
  }
};
</script>

注：方式一和方式二对于同一个字段，不能同时存在

3. watch的深度监听

​ 在监听对象类型时，上面介绍到的简单的监听方式只在监听第一次变化时有效果。这个时候深度监听就能派上用场。具体用法如下：

<template>
  <el-form :model="form">
    <el-form-item label="活动名称">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" :value="0" />
        <el-option label="区域二" :value="1" />
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  watch: {
    form: {
      handler(value, oldValue) {
        // 执行相关代码...
      }
    },
    deep: true // 主要实现
  }
};
</script>

由此可见，深度监听主要是在watch中配置了deep参数为true。此时，关于form中任何值发生变化，都可以监听到。但是有经验的童鞋会发现这样会带来一个问题，就是这种方式无法获取到变化前的值,也就是说handler方法中的参数oldValue和value都是相同的值。而且，通过这样一种方式去监听一个对象，所带来的开销也是挺大的。因此，在实际开发中我们不太建议采用这种方式。

4. watch监听对象中属性值的变化

​ 在上面我们提到了，通过deep深度监听对象类型数据存在着可以监听但是无法获取到值的变化和所带来开销较大的问题。而且，在实际开发中我们真正需要去监听整个对象的情况应该少之又少。这里，我介绍两种如何去监听对象数据类型中某个值的变化的方法供大家参考。

​ 方式一，通过简单监听去实现：

<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  watch: {
    'form.name': { // 监听form中的name
      handler(value, oldValue) {
        // 执行相关代码...
      }
    }
  }
};
</script>

方式二，通过计算属性computed和监听器watch结合使用的方式

<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  computed: {
    formName: function() {
      return this.form.name;
    }
  },
  watch: {
    formName: { // 通过监听computed中的formName，从而实现监听form中的name
      handler(value, oldValue) {
        // 执行相关代码...
      }
    }
  }
};
</script>