如何在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的入口，所有的逻辑代码都在这里定义。

<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 监听数据的变化。

<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 监听对象中的特定属性

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

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

const state = reactive({
  user: {
    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 来实现深度监听。

<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 还可以同时监听多个数据源的变化。我们可以传递一个数组来指定多个数据源。

<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 来实现这一点。

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

const 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），我们可以在组件卸载时调用该函数来清理副作用。

<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应用时更加得心应手。

复制全文生成海报前端开发 Vue.js JavaScript

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