vue组件watch属性实例讲解

下面来详细讲解一下“Vue组件watch属性实例讲解”的完整攻略。

1. watch属性简介

在 Vue 组件中，watch 属性是用于监听数据变化并作出相应行为的一种功能。通俗的说，就是当我们需要对某个数据进行监听，并且当数据发生变化时，希望自动执行一些操作，那么就可以使用 watch 属性。

2. watch属性的基础使用

watch 属性的基础使用格式如下：

watch: {
  数据名: {
    // 当数据变化时的操作
    handler(val, oldVal) {
      // 做出相应操作的代码
    },
    // 是否立即执行一次
    immediate: true,
    // 是否深度监听
    deep: true
  }
}

其中，数据名表示需要监听的数据的名称；handler是一个函数，当数据发生变化时，它会自动执行；immediate表示是否需要在初始化时立即执行一次该函数，deep则表示是否需要深度监听数据的变化，即也监听其中嵌套的对象或数组的变化。

下面是一个简单的示例说明：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World!"
    };
  },
  watch: {
    message: {
      handler(val, oldVal) {
        console.log("message发生了变化！新值为：" + val);
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

当 message 的值发生变化时，handler 方法会自动执行，并在控制台输出一条信息。在此示例中，我们设置 immediate 为 true，表示需要在初始化时立即执行一次 handler 方法。

3. watch属性的高级使用

除了基础使用外，watch 属性还有一些高级用法，下面将会用两个示例说明。

3.1 监听对象内部属性的变化

在有些情况下，我们并不希望监听整个对象的变化，而是只监听其中某个属性的变化。这时，我们可以通过 vm.$watch 方法来实现该功能。示例代码如下：

<template>
  <div>{{ user.name }}</div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "张三",
        age: 18
      }
    };
  },
  created() {
    this.$watch(
      // 第一个参数：需要监听的数据的名称
      () => this.user,
      // 第二个参数：当数据变化时的操作
      (val, oldVal) => {
        console.log("user.name 发生了变化！新值为：" + val.name);
      },
      // 第三个参数：是否深度监听
      { deep: true }
    );
  }
};
</script>

在该示例中，我们使用 vm.$watch 方法监听了 user 对象的变化，并设置了 deep: true，表示需要深度监听对象内嵌套的属性的变化。

3.2 监听多个数据的变化

在实际开发中，我们有时需要同时监听多个数据的变化。这时，我们可以通过 $watch 函数来实现该需求。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
      name: "张三"
    };
  },
  created() {
    this.$watch(
      // 监听多个数据的变化
      [() => this.message, () => this.name],
      (val, oldVal) => {
        console.log("message 或 name 发生了变化！");
      }
    );
  }
};
</script>

在该示例中，我们使用 vm.$watch 方法监听 message 和 name 两个数据的变化，并在它们一旦变化时执行对应操作。

总结

本文通过基础示例和高级示例的讲解，详细介绍了 Vue 组件中 watch 属性的用法。当我们需要监听一个或多个数据的变化，并且希望在数据变化时自动执行一些相关操作时，可以使用 watch 属性来实现。通过本文的讲解和示例，我们相信您已经理解了 watch 属性的基础使用和高级用法。