Vue 2.0 侦听器 watch属性代码详解

简介

Vue 2.0 中有个重要的特性——侦听器。在渲染过程中，Vue 会观察数据变化，并且自动更新 DOM。 在某些情况下，这不够灵活，我们需要执行一些自定义逻辑，这就是侦听器的用处了。

基础语法

Vue 中侦听器的基础语法是：

watch: {
  // 监听的属性
  property: {

    // 监听回调函数
    handler(newVal, oldVal) {
      // 当监听的属性发生变化时执行的逻辑
    },

    // 默认为 false，表示立即执行回调函数
    // 设置为 true，则在监听属性被创建后立即执行回调函数
    immediate: false,

    // 是否深度监听，即在嵌套的对象内部属性发生变化时也触发回调函数
    deep: false
  }
}

示例一

对于数据的简单监听，我们看以下的示例：

<template>
  <div>
    <p>现在是 {{ message }}</p>
    <input v-model="message" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "早上好"
      };
    },
    watch: {
      message(newVal, oldVal) {
        console.log("之前的消息是：" + oldVal);
        console.log("现在的消息是：" + newVal);
      }
    }
  };
</script>

在以上代码中，我们监听了 message 这个数据属性，当它变化时，我们会在控制台输出它的旧值和新值。这个示例很简单，只是展示了一个最基本的侦听器的用法。

示例二

对于深度监听，我们看以下的示例：

<template>
  <div>
    <p>小狗叫声：{{ dog.bark }}</p>
    <input v-model="dog.bark" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "小狗",
        dog: {
          bark: "汪汪"
        }
      };
    },
    watch: {
      dog: {
        deep: true,
        handler(newVal, oldVal) {
          console.log("之前的声音是：" + oldVal.bark);
          console.log("现在的声音是：" + newVal.bark);
        }
      }
    }
  };
</script>

我们监听了对象 dog，并且深度监听了它下面的 bark 属性。当 bark 发生变化时，我们输出变化前和变化后的值。

到这里，我们已经掌握了侦听器的基础使用方法，当我们需要对数据变化进行自定义的特殊处理时，这个特性非常有用。