---

📋前言

计算属性 computed 和侦听器 watch 都是 Vue.js 框架中用来响应式更新视图的重要概念。因此无论是在哪个版本，它们都是不可缺少的概念，这篇文章就不过多详细介绍计算属性和侦听器的概念和理论了，接下来主要谈谈 Vue2 和 Vue3 中计算属性和侦听器的语法变化和异同。

---

🎯计算属性

计算属性：计算属性实际上是一种计算一个值并将结果缓存起来的方法。当依赖的数据发生变化时，缓存会被重新计算。计算属性相比直接在模板表达式中调用方法或者直接使用表达式计算的好处在于其可以缓存结果，减少不必要的计算，提高性能。

Vue3 中的计算属性和 Vue2 中的计算属性基本相同，不过在语法上有所不同。在 Vue3 中，我们可以使用 computed 函数来定义计算属性，它接受一个函数作为参数，并返回一个 ref 对象，这个 ref 对象会自动追踪计算属性使用到的数据，并且在这些数据发生变化时重新计算计算属性的值。

上面说到计算属性是以函数的形式出现在组件的 computed 选项中，在新版的 Vue 3.x 的 setup 语法糖里，可以计算属性的具体实现函数传递给 computed() 方法，然后赋值给一个变量。

💻接下举个简单的例子。

<template>
  <p>原始count:{{ count }}</p>
  <p>计算属性count:{{ doubleCount }}</p>
  <p>JavaScript表达式的count:{{ count * 2 }}</p>
</template>

<script setup>
import { computed, ref } from "vue";
const count = ref(2);
const doubleCount = computed(() => count.value * 2);
</script>

---

🎯侦听器

侦听器：侦听器则通过监听数据变化来触发回调函数的执行。侦听器适用于当需要在数据变化时执行异步或开销较大的操作时使用，比如发送 Ajax 请求或进行复杂的计算。

Vue3 中的侦听器与 Vue2 中的 watch API 不同，Vue3 中可以使用新的 watchEffect 函数来监听响应式数据的变化，同时也可以使用 watch 监听指定的数据。

1️⃣ watchEffect 函数接受一个回调函数作为参数，这个回调函数中可以访问任何响应式数据，当这些数据变化时，回调函数都会被重新执行。

2️⃣ 如果要监听指定的数据，可以使用 watch 函数。它接受两个参数：要监听的数据和回调函数，当监听的数据发生变化时，回调函数会被执行。

💻接下举个简单的例子。

<template>
  <input type="number" v-model="num" />
  <p>result为:{{ result }}</p>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";
const num = ref(0);
const result = ref(0);
watch(
  () => num.value,
  (newValue, oldValue) => {
    console.log("旧值为：", oldValue, "新值为：", newValue);
    return (result.value = num.value * num.value);
  }
);
watchEffect(() => {
  console.log(`num: ${num.value}`);
});
</script>

---

📝最后

计算属性 computed 和侦听器 watch 都是实现响应式编程的重要工具，可以方便地处理复杂的业务数据变化场景。总的来说，Vue.js 3.x 中的计算属性和侦听器与 2.x 版本还是非常相似，都是用来处理响应式数据变化的关键工具。不同之处在于 3.x 版本中的语法略微有所不同，并且需要注意一些细节，如嵌套对象的侦听。