在 Vue 3 中，响应式系统为开发交互式用户界面提供了强大的基础。其中，computed 和 watch 是两个关键的特性，它们dou用于处理数据变化，但其核心定位、功Neng特性和使用场景却存在显著差异。本文将深入剖析这两个特性，并结合实际应用案例，帮助你理解它们的区别，从而geng有效地利用 Vue 3 的响应式系统。

computed 主要用于**声明性地计算**出新的值。它基于依赖于它的数据进行计算，并在数据发生变化时自动重新计算。computed 具有缓存机制，只有当依赖的数据源发生变化时才会重新执行计算逻辑。

watch 则是一种**命令式**的特性，用于**监听**某个数据的变化并执行相应的回调函数。它关注的是“数据变了之后要Zuo什么”，而不是为了得到一个返回值。 `watch` Ke以触发异步操作、DOM 操作、数据持久化等副作用。

核心定位 | 声明式计算,派生新值

命令方式 | 命令式侦听,执行副作用

缓存机制 | 有缓存,依赖不变则复用值

异步支持 | 不推荐

天然支持| 天然支持

computed 非常适合用来根据其他数据进行复杂的转换和衍生。例如你Ke以使用它来拼接字符串、进行数据过滤、排序等操作。

// 写法 ：函数形式computed: {  计算属性名 {    // 依赖 this.xxx 数据    return 计算结果;  }}// 写法 ：对象形式computed: {  计算属性名: {    get {       return 计算结果;     },    set {       // 当你尝试修改这个计算属性时触发       console.log;       }  }}

`watch` 虽然也Neng实现一些数据转换的功Neng，但通常需要手动编写回调函数来完成这些操作。

`watch` Zui擅长处理需要执行异步操作或开销较大的任务的情况。 例如：发起 API 请求、修改其他状态等。

watch: {  // 写法 ：简单监听  数据名 {    // newVal 是新值，oldVal 是旧值    // 执行逻辑...  },    // 写法 ：对象形式  数据名: {    handler {      // 逻辑...      console.log;     },    deep: true,      immediate: true // 立即执行：页面加载完就先执行一次 handler  }}

`computed` 不支持直接的异步操作和开销较大的操作。这主要是因为 `computed` 是基于同步的返回值的。

<template>  <div>    <h2>购物车</h2>    <ul v-for=" in list" :key="index">        {{ item.name }} - ￥{{ item.price }} x         <button @click="item.count>  ? item.count-- : ''">-</button>        {{ item.count }}        <button @click="item.count++">+</button>      </li>    </ul>    <!-- 这里直接使用计算属性 -->    <p>总价：￥{{ totalPrice }}</p>  </div></template><script>export default {  data {    return {      list:     };  },  computed: {    // 只要 list 里任何商品的 price 或 count 变了totalPrice 自动geng新      totalPrice {          console.log; // 验证缓存机制          return this.list.reduce => sum + item.price * item.count, );      }  }};</script>

<template> <div >樯ᔣɎD;ɏA;ɎD;ɎD;ɎD;ɎD;ɎD;ɎD;