一、总述

computed和watch都是 vue2/vue3 中用于监听数据变化的属性

二、computed计算属性

1、在computed中定义的计算属性，都会被缓存起来，当计算属性里面依赖的一个或多个属性变化，则会重新计算当前计算属性的值；如果依赖的属性没有发生变化，则会从缓存中读取

2、必须有return返回 （一个数据受多个数据影响）

import { computed, reactive, ref } from 'vue'
let price = ref(0)//$0
 
let p = computed<string>(()=>{
   return `$` + price.value
})
 
price.value = 300
console.log(p) // '$300' --- 计算出来的属性

三、watch监听器

1、watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些操作

2、传入三个参数：

watch第一个参数监听源  
watch第二个参数回调函数cb（newVal, oldVal）  
watch第三个参数一个options配置项是一个对象：
{
deep:true //是否开启深度监听    
immediate: true //是否立即调用一次 
}

<template>
  <div>
    case1: <input v-model="message.foo.bar.name" type="text">
    <h1>{{ message }}</h1>

    case2: <input v-model="message2" type="text">
    <h1>{{ message2 }}</h1>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'

let message = ref({
  foo: {
    bar: {
      name: 'sun'
    }
  }
})

let message2 = ref<string>('da sun')

watch([message, message2], (newVal, oldVal) => {
  console.log(newVal, '新值');
  console.log(oldVal, '旧值');
}, {
  deep: true, // 深度监听
  immediate: true // 是否立即调用一次
})
</script>

<style scoped></style>

四、区别

1、功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调
2、是否调用缓存： computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return： computed必须有；watch可以没有
4、使用场景： computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步： computed函数不能有异步；watch可以