Vue之监听器的使用案例详解

在Vue中，我们可以使用监听器来监听数据的变化并且进行处理。在这篇文章中，我们将详细讲解Vue中监听器的使用方法，以及提供一些使用案例。

前置知识

在阅读本文之前，请确保您已经掌握以下知识：

Vue的基本语法和API
数据绑定和计算属性的使用方法

监听器的基本使用

在Vue中，我们可以使用watch选项来定义一个监听器。同时，我们还可以使用vm.$watch方法来动态添加监听器。

watch选项

在Vue的组件中，我们可以在watch选项中定义一个监听器。比如下面这个例子：

<template>
  <div>
    <p>My name is {{ name }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: 'Tom',
      };
    },
    watch: {
      name(newVal, oldVal) {
        console.log(`name changed from ${oldVal} to ${newVal}`);
      },
    },
  };
</script>

在上面的代码中，我们定义了一个name属性，并且在watch选项中定义了一个监听器，当name属性发生变化时，将会在控制台中输出变化前后的值。

$watch方法

在Vue的实例中，我们可以使用vm.$watch方法来动态添加监听器。例如：

<template>
  <div>
    <p>My name is {{ name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: 'Tom',
      };
    },
    methods: {
      changeName() {
        this.name = 'Jerry';
      },
    },
    created() {
      this.$watch('name', (newVal, oldVal) => {
        console.log(`name changed from ${oldVal} to ${newVal}`);
      });
    },
  };
</script>

在上面的代码中，我们使用vm.$watch方法来动态添加一个监听器，监听name属性的变化。当点击“Change Name”按钮时，Vue会自动检测到name属性的变化，并且执行相关的代码。

监听器的高级用法

除了普通的监听器之外，Vue还提供了一些高级的监听器，用于处理一些特殊的情况。

深度监听

在Vue中，我们可以使用deep选项来告诉Vue对一个对象进行深度监听。例如：

<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.email }}</p>
    <button @click="changeUser">Change User</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Tom',
          email: 'tom@example.com',
        },
      };
    },
    methods: {
      changeUser() {
        this.user.name = 'Jerry';
      },
    },
    watch: {
      user: {
        deep: true,
        handler(newVal, oldVal) {
          console.log('user changed', newVal, oldVal);
        },
      },
    },
  };
</script>

在上面的代码中，我们在watch选项中定义了一个对于user属性的deep监听器，监听整个user对象的变化。

立即执行监听器

在Vue中，我们可以使用immediate选项来告诉Vue在监听器被添加时立即执行该监听器。例如：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increase">Increase</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increase() {
        this.count += 1;
      },
    },
    watch: {
      count: {
        immediate: true,
        handler(newVal, oldVal) {
          console.log(`count changed from ${oldVal} to ${newVal}`);
        },
      },
    },
  };
</script>

在上面的代码中，我们在watch选项中定义了一个立即执行的监听器，用于监听count属性的变化。

示例说明

示例一：监听复杂对象的变化

在Vue中，我们可以使用watch选项的deep属性来监听复杂对象的变化。例如在下面的示例中，我们定义了一个包含两个对象的users数组，当其中任意一个对象的属性发生变化时，Vue会自动检测到变化并且执行相关的代码。

<template>
  <div>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        <input type="text" v-model="user.name" />
        <input type="text" v-model="user.email" />
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        users: [
          {
            name: 'Tom',
            email: 'tom@example.com',
          },
          {
            name: 'Jerry',
            email: 'jerry@example.com',
          },
        ],
      };
    },
    watch: {
      users: {
        deep: true,
        handler(newVal, oldVal) {
          console.log('users changed', newVal, oldVal);
        },
      },
    },
  };
</script>

示例二：监听用户输入的特定关键字

在Vue中，我们可以使用计算属性和watch选项来监听用户输入的特定关键字。例如，在下面的示例中，我们定义了一个字符串searchText，当用户输入的内容包含该字符串时，Vue会自动检测到变化并且执行相关的代码。

<template>
  <div>
    <input type="text" v-model="searchText" />
    <ul>
      <li v-for="item in items" :key="item.id" v-if="item.title.includes(searchText)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            id: 1,
            title: 'Apple',
          },
          {
            id: 2,
            title: 'Banana',
          },
          {
            id: 3,
            title: 'Orange',
          },
        ],
        searchText: '',
      };
    },
    watch: {
      searchText: {
        immediate: true,
        handler(newVal, oldVal) {
          console.log(`searchText changed from ${oldVal} to ${newVal}`);
        },
      },
    },
  };
</script>

在上面的代码中，我们定义了一个监听器，当用户输入关键字时，Vue会自动发现变化并且执行相关的代码。