vue中 computed和watch 的区别

在Vue.js中，computed和watch都是常用的数据监控方法。都用于监视数据的变化并执行相应的逻辑，只是实现方式和适用的场景不同。

computed

computed是一种计算属性，可以根据其他数据计算出新的值，并且会缓存结果。当依赖的数据发生变化时，computed会自动更新计算结果。computed常用于处理复杂或频繁使用的计算。

watch

wat是一种观察者模式，可以监听数据变化并执行回调函数。每当被监视的数据发生变化时，watch就会自动执行回调函数，可用于执行异步操作，发送请求等

他俩的区别

1，computed是一种计算属性，会自动缓存结果，适合处理复杂和频繁使用的计算。watch则是一种观察者模式，需要手动执行回调函数，可用于执行异步操作等。

2，computed只有依赖的数据发生改变时才会重新计算，因此性能更高。而watch监听的数据每次发生变化都会执行回调函数，因此可能会造成性能瓶颈。

3，如果需要处理数据变化后执行其他操作，或监听数组或对象的变化，应该使用watch。如果需要对数据进行计算并且结果会频繁使用，应该使用computed。

使用场景

computed 当一个属性值是通过其他属性计算而来，可以是一个也可以是多个

 computed: {
    btnText(){
      return this.totalCount !== 0 ? `${this.totalCount}s`: "获取验证码"
    }
  } 

 当监测到computed监测的值变化时，自动触发某些方法时就要使用set函数

computed: {
  pageComponents: {
    get() {
        return this.$store.state.pageComponents
    },
    set(value) {
        this.$store.commit('updateList', value)
    }
  }
}

 watch是监听data或props中的数据变化，并且支持异步，当数据发生变化的时候，watch中的函数

就会执行，有两个参数，前者是newVal，后者是oldVal。为了发现对象内部值的变化，需要进行深度监听，设置deep: true，但监听数组不需要这么做。
immediate:true 页面首次加载的时候做一次监听。

data() {
    return {
      age:21,
      obj:{
        name:"xx"
      }
    }
},
watch: {
	//1.监听data里的某个属性
    age: {
        handler(newValue, oldValue) {
            console.log('newValue:' + newValue + ',oldValue:' + oldValue)
        },
        immediate: true
    },
    //2.监听data中对象的某个属性
    'obj.name' (val) { 
　　　　console.log(val)
　　 }
},
//newValue:21,oldValue:undefined    页面初始化就监听

 没加immediate：true 执行一次   加了immediate：true 执行俩次

监听多个值的变化时    watch需结合computed使用

data() {
    return {
       password:"",
       userCode:""
    }
},
computed: {
   info() {
      const { password, userCode } = this
      return {
          password,
          userCode
      }
   },
},
watch:{
    info:{
       handler: function(newval , oldval) {
          if(newval.password && newval.userCode){
            this.sign = true
          }else{
            this.sign = false
          }
       },
       deep:true
   },
}

 总结：本人才疏学浅，水平有限，请大家多多包涵和指点。加油🤝🫡🫶