Vue中watch使用方法详解

在Vue中，watch是一个很强大的功能，可以监听数据的变化，并做出相应的响应。在本篇文章中，我们会详细讲解Vue中watch的使用方法。

1. 监听数据

在Vue中，我们可以通过watch监听某个数据的变化。例如，我们有一个变量message，我们可以通过以下方式来监听message的变化：

watch: {
  message(newValue, oldValue) {
    console.log(`旧的数据是${oldValue}，新的数据是${newValue}`);
  }
}

在上述代码中，我们定义了一个watch，其名称为message，每当该变量的值发生变化时，都会执行函数体内的代码，打印出变化前后的值。

2. 深度监听

在Vue中，我们有时需要深度监听对象或数组内部的变化。例如，我们可以监听一个数组内部某个元素的变化。我们可以通过以下方式进行深度监听：

watch: {
  'arr.0'(newValue, oldValue) {
    console.log(`arr[0]的值从${oldValue}变成了${newValue}`);
  }
}

在上述代码中，我们监听了数组arr内部的第一个元素，当该元素的值发生变化时，就会执行函数体内的代码。

3. 监听多个数据

在Vue中，我们可以同时监听多个数据的变化。例如，我们可以监听变量a和变量b的变化：

watch: {
  a(newValue, oldValue) {
    console.log(`变量a的值从${oldValue}变成了${newValue}`);
  },
  b(newValue, oldValue) {
    console.log(`变量b的值从${oldValue}变成了${newValue}`);
  }
}

在上述代码中，我们定义了两个watch，分别监听了变量a和变量b的变化。

4. 示例一

下面，我们通过一个示例来进一步说明watch的用法。在该示例中，我们有一个按钮，每当点击该按钮时，就会将message的值加1：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="addMessage">加1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 0
    };
  },
  methods: {
    addMessage() {
      this.message++;
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`旧的数据是${oldValue}，新的数据是${newValue}`);
    }
  }
};
</script>

在上述代码中，我们定义了一个message变量，每当按钮被点击时，该变量就会加1。同时，我们定义了一个watch，监听了变量message的变化。在runserve中，我们打开浏览器控制台，就可以看到每次变化时都会输出旧的值和新的值。

5. 示例二

下面，我们再通过一个示例来进一步说明深度监听的用法。在该示例中，我们有一个数组arr，我们需要监听数组的第一个元素的变化：

<template>
  <div>
    <p>{{ arr }}</p>
    <button @click="changeArr">改变数组</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['原始值']
    };
  },
  methods: {
    changeArr() {
      this.arr[0] = '新的值';
    }
  },
  watch: {
    'arr.0'(newValue, oldValue) {
      console.log(`arr[0]的值从${oldValue}变成了${newValue}`);
    }
  }
};
</script>

在上述代码中，我们定义了一个数组arr，当点击按钮时，数组的第一个元素就会变为'新的值'。同时，我们使用了深度监听语法，监听了arr数组的第一个元素的变化。在runserve中，我们打开浏览器控制台，就可以看到每次变化时都会输出旧的值和新的值。