VUE3 监听器（watch）

在 Vue 3 中，监听器（watch）是用来观察响应式数据的变化，并在数据发生变化时执行相应操作的机制。watch 主要用于响应式数据变化时的副作用处理，比如异步操作、数据更新等。

1. 基础使用

在 Vue 3 中，watch 是作为一个组合式 API 提供的，可以在 setup 函数中使用它来监听响应式变量的变化。

html 复制代码

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increase</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 使用常规函数来监听 count
    watch(count, function (newValue, oldValue) {
      console.log('Count changed from ' + oldValue + ' to ' + newValue);
    });

    function incrementCount() {
      count.value++;
    }

    return { count, incrementCount };
  }
}
</script>

在这个例子中，watch 用来监听 count 变量的变化，当 count 改变时，回调函数会被触发，打印出 count 的旧值和新值。

2. 监听多个变量

watch 也可以监听多个响应式变量，只需要将它们作为数组传递给 watch。

html 复制代码

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="changeName">Change Name</button>
    <button @click="changeAge">Change Age</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const name = ref('Bob');
    const age = ref(25);

    // 监听多个变量并使用普通函数
    watch([name, age], function (newValues, oldValues) {
      console.log('Name changed from ' + oldValues[0] + ' to ' + newValues[0]);
      console.log('Age changed from ' + oldValues[1] + ' to ' + newValues[1]);
    });

    function changeName() {
      name.value = 'Alice';
    }

    function changeAge() {
      age.value = 30;
    }

    return { name, age, changeName, changeAge };
  }
}
</script>

这里，watch 监听了 name 和 age 两个变量，回调函数会在任意一个变量发生变化时触发。

3. 深度监听

有时我们需要监听一个对象或数组的内部变化，而不仅仅是它的引用变化，这时可以使用 deep 选项。

html 复制代码

<template>
  <div>
    <p>{{ user }}</p>
    <button @click="user.name = 'Charlie'">Change Name</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({ name: 'Alice', age: 30 });

    // 使用普通函数进行深度监听
    watch(user, function (newValue, oldValue) {
      console.log('User changed:', newValue);
    }, { deep: true });

    return { user };
  }
}
</script>

在这个例子中，watch 会监听 user 对象的任何属性变化，甚至是 name 和 age 字段的内部变化。

4. 立即执行监听器

有时我们希望在组件初始化时就立即执行一次监听器，而不仅仅是在数据发生变化时。可以通过 immediate 选项来实现。

html 复制代码

<template>
  <div>
    <p>Message: {{ message }}</p>
    <button @click="message = 'Hello, Vue!'">Change Message</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const message = ref('Welcome');

    // 使用普通函数并立即执行监听器
    watch(message, function (newValue, oldValue) {
      console.log('Message changed from ' + oldValue + ' to ' + newValue);
    }, { immediate: true });

    return { message };
  }
}
</script>

在这个例子中，watch 在组件创建时立即执行一次，输出 message 的初始值。

5. 异步操作

watch 中的回调函数可以是异步的，可以用于异步操作，比如请求数据等。

html 复制代码

<template>
  <div>
    <p>Query: {{ query }}</p>
    <button @click="query = 'Vue 3'">Search for Vue 3</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const query = ref('');

    // 使用普通函数处理异步操作
    watch(query, function (newQuery) {
      if (newQuery) {
        fetch('https://api.example.com/search?q=' + newQuery)
          .then(response => response.json())
          .then(data => {
            console.log(data);
          });
      }
    });

    return { query };
  }
}
</script>

在这个例子中，当 query 变化时，会发起一个异步请求并打印返回的数据。

6. 停止监听

如果需要停止监听，可以使用 watch 的返回值，它是一个函数，调用该函数可以停止监听。

html 复制代码

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="stopWatching">Stop Watching</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 使用普通函数监听 count
    const stop = watch(count, function (newValue, oldValue) {
      console.log('Count changed from ' + oldValue + ' to ' + newValue);
    });

    // 停止监听
    function stopWatching() {
      stop();  // 停止监听
    }

    return { count, stopWatching };
  }
}
</script>

总结

在 Vue 3 中，watch 作为一个组合式 API 提供了灵活的监听数据变化的能力。你可以：

监听单个或多个响应式变量。
使用 deep 选项监听对象的深层变化。
使用 immediate 选项让监听器立即执行。
处理异步操作。
在需要时停止监听。