详解Vue中watch的详细用法

下面我就详细讲解一下“详解Vue中watch的详细用法”。

什么是watch

在Vue.js中，watch是一个非常有用的特性。他允许你在监测到数据的变化时做出相应的响应。watch可以监测一个特定的属性，如果这个属性的值发生变化，就会调用一段特定的函数。

watch的基本用法

下面，我们先来看一下watch的基本用法。在Vue实例中可以通过$watch方法为一个属性设置一个监听器，当属性的值发生变化时，这个监听器就会被触发。$watch方法的基本用法如下：

vm.$watch('someData', function(newValue, oldValue) {
  // 在属性值改变时做些事情
})

其中，someData指的是要监听的属性名，newValue表示修改之后的值，oldValue表示修改之前的值。因此，通过在vue实例中调用$watch方法，当someData的值发生变化时就会触发函数。

下面是一个简单的示例：

<template>
  <div>
    <p>message: {{ message }}</p>
    <button @click="changeMessage">change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello world"
    };
  },
  methods:{
    changeMessage() {
      this.message = "hello Vue";
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`改变前的值${oldValue}，改变后的值${newValue}`);
    }
  }
};
</script>

在这个示例中，我们定义了一个message属性，初始值为"hello world"，然后通过按钮改变这个值。同时在watch中定义了对message属性的监听，当我们点击按钮改变message值时，该监听就会被触发，控制台会输出对应的信息。

watch的高级用法

除了基本用法以外，Vue中的watch还有一些比较高级的用法，下面我将逐一讲解。

深度监听

深度监听是指监听一个对象或数组内部元素的变化。Vue提供了一个深度监听选项deep来实现深度监听。

vm.$watch('someObject', callback, {
  deep: true
})

在深度监听时，需要通过选项deep开启深度监听。下面是一个示例：

<template>
  <div>
    <p>user.name: {{ user.name }}</p>
    <p>user.age: {{ user.age }}</p>
    <button @click="changeUserData">change user data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "Tom",
        age: 20
      }
    };
  },
  methods:{
    changeUserData() {
      this.user.name = "Jerry";
      this.user.age = 21;
    }
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log(`user改变前：`, oldValue);
        console.log(`user改变后：`, newValue);
      },
      deep: true
    }
  }
};
</script>

在这个示例中，我们定义了一个user对象作为监听对象，并对user对象进行了修改。同时在watch中定义了对user对象的监听，并开启了深度监听选项，在我们对user进行修改时，该监听就会被触发，控制台会输出对应的信息。

立即触发

默认情况下，watch监听器是在数据被修改后才会被触发。如果我们想在监听器被添加时立即执行一次监听函数，可以通过指定选项immediate来实现。

vm.$watch('someData', callback, {
  immediate: true
})

下面是一个示例：

<template>
  <div>
    <p>message: {{ message }}</p>
    <button @click="changeMessage">change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello world"
    };
  },
  methods:{
    changeMessage() {
      this.message = "hello Vue";
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`改变前的值${oldValue}，改变后的值${newValue}`);
    }
  },
  created() {
    console.log(`立即执行watch监听器：${this.message}`);
  }
};
</script>

在这个示例中，我们定义了一个message属性，初始值为"hello world"。在Vue实例初始化完成时，created钩子函数会被触发，然后在watch监听器中声明了immediate选项，开启立即执行。因此，在created钩子函数中就会立即执行一次监听函数并输出信息。