vue watch监控对象的简单方法示例

下面是详细讲解 "Vue watch 监控对象的简单方法示例" 的完整攻略。

什么是 Vue Watch？

Vue 是一个响应式框架，数据的变化能够自动触发视图的更新。Vue Watch 提供了一种方式来监听 Vue 实例中某个数据的变化，当它的值发生变化时，可以触发特定的操作。

如何在 Vue 中使用 Watch

在 Vue 实例中，可以使用 watch 属性来监测数据的变化。watch 属性可以是一个对象，每个键值对都表示要监视的属性和触发的回调函数。以下是一个简单的例子。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button v-on:click="changeMessage">改变 message 的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!"
    }
  },
  methods: {
    changeMessage() {
      this.message = "Vue is awesome!";
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message 从 ${oldVal} 变成 ${newVal}`);
    }
  }
};
</script>

在这个例子中，我们定义了一个名为 message 的数据属性，并在 Vue 实例中声明了一个 watch 函数来监测 message 属性的变化。当 message 的值发生变化时，watch 函数会打印出 message 属性的前一个值和当前值。

Watch 与深度监听

有时候我们需要监听一些嵌套的对象属性的变化，可以使用 Vue 为我们提供的 deep 属性。以下是一个例子。

<template>
  <div>
    <h1>{{ userProfile.name }}</h1>
    <button v-on:click="changeUserName">改变用户名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userProfile: {
        name: "Vue",
        age: 3
      }
    }
  },
  methods: {
    changeUserName() {
      this.userProfile.name = "Vue 3.0";
    }
  },
  watch: {
    userProfile: {
      handler(newVal, oldVal) {
        console.log(`userProfile 从 ${oldVal.name} 变成 ${newVal.name}`);
      },
      deep: true
    }
  }
};
</script>

在这个例子中，我们定义了一个名为 userProfile 的嵌套对象属性，并使用 watch 函数来监测 userProfile 属性的变化。我们给 watch 函数传递了一个对象，对象的 handler 属性是一个函数，函数的第一个参数是新的值，第二个参数是旧的值。deep 属性用来表示是否深度监听嵌套的属性，这里我们将它设置为 true，来监听嵌套属性的变化。当 userProfile 的任意一个属性发生变化时，handler 函数都会被调用，并打印出嵌套属性的前一个值和当前值。

这就是使用 watch 监听变化的两个基本示例。当我们需要在 Vue 应用中监听某个数据的变化时，可以使用 watch 函数来实现。