computed和watch的区别

computed和watch在实际开发项目中经常使用，在面试中也被经常问到，今天做一个关于他们的笔记，用以加深印象。
1：computed是计算属性；watch是监听属性。
2：computed支持缓存，当依赖的属性值发生变化时,计算属性重新计算，没有变化就使用缓存数据，不需要再一次执行computed；而watch没有缓存功能，数据变化触发相应的操作。
3：computed不支持异步，异步操作时无法监听数据变化；watch支持异步操作。
4：computed中的函数必须调用return。
5：watch里面有两个配置项，一个为immediate(是否立即执行),另一个为deep(是否开启深度监听)。
6：使用场景：
computed：
（1）：一个属性受到多个属性影响，典型的是：商品结算、搜索框过滤数据列表。
（2）：根据已有数据计算新数据，加减乘除、数组等的过滤处理等。
watch：
（1）：当数据变化时要执行的操作，比如发送网络请求，一些自适应等。
（2）：当数据变化影响多条数据诸如表单验证等。

a：vue3中使用computed和watch

<template>
  <div>
      <p>{{sum}}</p>
      <p>{{sumData}}</p>
      <el-button @click="changeData">测试</el-button>
  </div>
</template>
<script setup>
import {ref,computed,watch} from "vue"
const sum = ref(1)
const sumData = computed(()=>{
  return sum.value*10
})
const changeData = ()=>{
  sum.value++
}
watch(sum,(newValue, oldValue)=>{
    console.log('newValue', newValue)
    console.log('oldValue', oldValue)
    if(newValue>5){
    	//解除监听
		stopWatch()
	}
})
</script>

b：定义复杂类型数据，使用深度监听，立即执行

<template>
  <div>
    <p>{{ obj.name }}---{{ obj.age }}---{{ obj.other.hobby }}</p>
    <el-button @click="changeData">测试</el-button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
let obj = ref({
  name: '小张',
  age: 18,
  other: {
    hobby: '打篮球'
  }
})
const changeData = () => {
  obj.value.other.hobby = '骑行'
}
watch(
  obj,
  (newVal, oldVal) => {
    console.log('新值:', newVal)
    console.log('旧值:', oldVal)
  },
  { immediate: true, deep: true }
)
</script>

c：在不开启deep的前提下，精确侦听某对象的某个属性

<template>
  <div>
    <p>{{ obj.name }}---{{ obj.age }}---{{ obj.other.hobby}}</p>
    <el-button @click="changeData">测试</el-button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
let obj = ref({
  name: '小张',
  age: 18,
  other: {
    hobby: '打篮球'
  }
})
const changeData = () => {
  obj.value.other.hobby = '骑行'
}
watch(()=>obj.value.other.hobby, (newVal, oldVal) => {
  console.log('新值:', newVal)
  console.log('旧值:', oldVal)
})
</script>

d：watch侦听多条数据

<template>
  <div>
    <p>{{ obj.name }}---{{ obj.age }}---{{ obj.other.hobby}}---{{obj.other.address.a.b}}</p>
    <el-button @click="changeData">测试</el-button>
  </div>
</template>
<script setup>
import {reactive, computed, watch } from 'vue'
let obj = reactive({
  name: '小张',
  age: 18,
  other: {
    hobby: '打篮球',
    address:{
      a:{
        b:'xxx'
      }
    }
  }
})
const changeData = () => {
  obj.name = '小明'
  obj.age++
  obj.other.hobby = '骑行'
  obj.other.address.a.b = 'xx'

}
watch([obj,()=>obj.name,()=>obj.age,()=>obj.other.hobby,()=>obj.other.address.a.b], (newVal, oldVal) => {
  console.log('新值:', newVal)
  console.log('旧值:', oldVal)
},{deep:true})
</script>