如何在Vue3中使用组合API和watch监听数据变化？

随着前端技术的不断发展，Vue3 作为 Vue.js 的最新版本，引入了一系列新特性，其中组合API（Composition API）是最为瞩目的一个。组合API不仅增强了代码的组织性和可读性，还提供了更多的灵活性和可重用性。在日常开发中，我们经常需要监听数据的变化，并根据变化做出相应的处理。这篇文章将详细介绍如何在Vue3中使用组合API和watch监听数据变化，帮助你更好地理解和掌握这项技术。

##1. 什么是组合API？

组合API是Vue3中提供的一套用于组织和复用代码的新语法。与传统的选项式API（Options API）不同，组合API允许开发者通过函数来组织逻辑代码，这样可以更好地复用和共享功能逻辑。

### 1.1 组合API的基本使用

API的核心概念包括 `setup` 函数、`ref` 和 `reactive` 函数。`setup` 函数是组合API的入口，所有的逻辑代码都在这里定义。

```javascript<script setup>import { ref, reactive } from 'vue';
const count = ref(0);const state = reactive({  message: 'Hello Vue3'});
function increment() {  count.value++;}</script>
<template>  <div>    <p>{{ state.message }}</p>    <p>{{ count }}</p>    <button @click="increment">Increment</button>  </div></template>```

在上述代码中，`ref` 用于定义基本数据类型的响应式变量，`reactive` 用于定义对象类型的响应式变量。`setup` 函数返回的数据和方法可以在模板中直接使用。

## 2. 监听数据变化

在Vue3中，`watch` 函数用于监听数据的变化，并在数据发生变化时执行相应的逻辑。与 `watchEffect` 不同，`watch` 可以更加精确地监听某个或某些特定数据的变化。

### 2.1 基本的watch使用

让我们来看一个基本的示例，如何使用 `watch` 监听数据的变化。
​​​​​​​

```javascript<script setup>import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {  console.log(`count changed from ${oldValue} to ${newValue}`);});
function increment() {  count.value++;}</script>
<template>  <div>    <p>{{ count }}</p>    <button @click="increment">Increment</button>  </div></template>```

在这个示例中，我们定义了一个 `ref` 类型的变量 `count`，并使用 `watch` 监听它的变化。当 `count` 的值发生变化时，`watch` 回调函数会被触发，并输出新旧值。

### 2.2 监听对象中的特定属性

如果我们想要监听一个对象中的某个特定属性的变化，可以通过传递一个函数来指定监听的属性。​​​​​​​

```javascript<script setup>import { reactive, watch } from 'vue';
const state = reactive({ : {    name: 'John',    age: 30  }});
watch(() => state.user.age, (newAge, oldAge) => {  console.log(`User's age changed from ${oldAge} to ${newAge}`);});
function incrementAge() {  state.user.age++;}</script>
<template>  <div>    <p>{{ state.user.name }} is {{ state.user.age }} years old</p>    <button @click="incrementAge">Increase Age</button>  </div></template>```

在这个示例中，我们通过传递一个箭头函数 `() => state.user.age` 给 `watch` 来监听 `state.user.age` 的变化。

## 3. 深度监听

有时候我们需要监听一个对象内部的所有属性的变化，这时候就需要用到深度监听（deep watch）。我们可以在 `watch` 的选项参数中设置 `deep: true` 来实现深度监听。​​​​​​​

```javascript<script setup>import { reactive, watch } from 'vue';
const state = reactive({  user: {    name: 'John',    age: 30,    address: {      city: 'New York'    }  }});
watch(state.user, (newUser, oldUser) => {  console.log('User object changed', newUser, oldUser);}, { deep: true });
function changeCity() {  state.user.address.city = 'Los Angeles';}</script>
<template>  <div>    <p>{{ state.user.name }} lives in {{ state.user.address.city }}</p>    <button @click="changeCity">Move to Los Angeles</button>  </div></template>```

在这个示例中，我们通过设置 `deep: true` 来深度监听 `state.user` 对象的变化，这样即使对象内部的属性发生变化，监听器也会被触发。

## 4. 监听多个数据源

`watch` 还可以同时监听多个数据源的变化。我们可以传递一个数组来指定多个数据源。
​​​​​​​

```javascript<script setup>import { ref, watch } from 'vue';
const count = ref(0);const message = ref('Hello');
watch([count, message], ([newCount, newMessage], [oldCount, oldMessage]) => {  console.log(`Count changed from ${oldCount} to ${newCount}`);  console.log(`Message changed from '${oldMessage}' to '${newMessage}'`);});
function updateMessage() {  message.value = 'Hello Vue3';}</script>
<template>  <div> <p>{{ count }}</p>    <p>{{ message }}</p>    <button @click="increment">Increment</button>    <button @click="updateMessage">Update Message</button>  </div></template>```

在这个示例中，我们同时监听了 `count` 和 `message` 两个数据源的变化，并在回调函数中分别处理它们的变化。

## 5. 立即执行的watch

在某些情况下，我们希望在数据初始化时立即执行一次监听逻辑，而不仅仅是在数据变化时执行。我们可以在 `watch` 的选项参数中设置 `immediate: true` 来实现这一点。
​​​​​​​

```javascript<script setup>import { ref, watch } from 'vue';
 count = ref(0);
watch(count, (newValue, oldValue) => {  console.log(`count changed from ${oldValue} to ${newValue}`);}, { immediate: true });
function increment() {  count.value++;}</script>
<template>  <div>    <p>{{ count }}</p>    <button @click="increment">Increment</button>  </div></template>```

在这个示例中，我们通过设置 `immediate: true` 使得 `watch` 监听器在初始化时立即执行一次。

## 6. 清理副作用

在某些情况下，`watch` 监听器会产生副作用（如定时器、订阅等），这些副作用需要在组件卸载时清理。Vue3 的 `watch` 会返回一个停止函数（stop function），我们可以在组件卸载时调用该函数来清理副作用。
​​​​​​​

```javascript<script setup>import { ref, watch, onUnmounted } from 'vue';
const count = ref(0);
const stop = watch(count, (newValue, oldValue) => {  console.log(`count changed from ${oldValue} to ${newValue}`);});
onUnmounted(() => {  stop();});
function increment() {  count.value++;}</script>
<template>  <div>    <p>{{ count }}</p>    <button @click="increment">Increment</button>  </div></template>```

在这个示例中，我们在组件卸载时调用 `stop` 函数来清理 `watch` 监听器，避免内存泄漏和不必要的副作用。

## 结论

通过本文的介绍，我们了解了如何在Vue3中使用组合API和watch监听数据变化。组合API提供了更灵活的代码组织方式，而watch则是一个强大的工具，帮助我们精确地监听数据的变化，并做出相应的处理。掌握这些技术，可以让我们在开发Vue3应用时更加得心应手。