Vue 3 中的 watch 函数：实战指南

Vue.js 是一个功能丰富的前端框架，它允许开发者以声明式的方式创建动态和反应式的用户界面。Vue 3 引入的 Composition API 增强了代码的组织和复用，其中 watch 函数是一个非常有用的特性。本文将通过一系列的示例，展示如何在 Vue 3 应用程序中使用 watch 函数来监控数据变化。

监控响应式引用（ref）

响应式引用是 Vue 3 中最基本的响应式特性之一。下面的例子演示了如何监控一个响应式引用的变化：

import {
    ref, watch } from 'vue';

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

    watch(count, (newCount, oldCount) => {
   
      console.log(`Count changed from ${
     oldCount} to ${
     newCount}`);
      if (newCount === 10) {
   
        alert('Count reached 10!');
      }
    });

    return {
    count };
  }
};

在这个例子中，每当 count 的值变化时，watch 回调就会执行，并打印出新旧值。

监控响应式对象（reactive）

reactive 提供了一个更复杂的响应式状态管理。下面的例子展示了如何监控一个响应式对象的属性变化：

import {
    reactive, watch } from 'vue';

export default {
   
  setup() {