Vue3 计算属性和侦听器实战（computed、watch）

当我们在Vue 3中使用计算属性（computed）和侦听器（watch）时，主要目标是实现对数据的响应式处理和对数据变化的监视。计算属性用于处理数据的计算逻辑，而侦听器用于在数据变化时执行一些副作用操作。下面我将用详细的代码示例来解释Vue 3中计算属性和侦听器的实战用法。

首先，假设我们有一个简单的场景，要计算一个人的年龄，并在年龄变化时输出一些信息。

设置Vue实例：

const app = Vue.createApp({
  data() {
    return {
      birthYear: 1990,
      currentYear: new Date().getFullYear()
    };
  },
  computed: {
    age() {
      return this.currentYear - this.birthYear;
    }
  },
  watch: {
    age(newAge, oldAge) {
      console.log(`年龄从 ${oldAge} 岁变为 ${newAge} 岁`);
    }
  }
});

const vm = app.mount('#app');

在这段代码中，我们创建了一个Vue应用，定义了birthYear和currentYear作为响应式数据。然后，我们使用computed属性创建了一个计算属性age，用于计算年龄。在watch中，我们侦听了age属性的变化，一旦年龄发生变化，就会触发回调函数。

HTML模板：

<div id="app">
  <p>出生年份：{{ birthYear }}</p>
  <p>当前年份：{{ currentYear }}</p>
  <p>年龄：{{ age }}</p>
</div>

在HTML模板中，我们将birthYear、currentYear和age属性展示出来。

当你打开网页并查看控制台时，你会看到每次age属性变化时，都会输出年龄变化的信息。

这个示例中，我们演示了如何使用Vue 3的计算属性和侦听器来实现一个简单的年龄计算和监视功能。计算属性用于实时计算数据，而侦听器用于对数据的变化做出响应。在实际开发中，你可以根据业务需要来设计更复杂的计算属性和侦听器，以满足你的需求。