computed和watch的使用场景以及区别

computed

computed适用于动态计算data或props中的数据，需要加return，当数据无变化时会优先从缓存里读取。
使用场景：当一个属性值是通过其他属性值计算而来，可以是一个也可以是多个。
这里相当于使用的是get方法

 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

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    页面初始化就监听

1.没加immediate: true

2.加了immediate: true，会执行两次

在加了immediate: true后会在生命周期开始之前执行，但是此时的传递的默认值一般为空，然后再执行生命周期函数，最后当传递的值发生变化时还会执行一次wacth里的方法，所以总共执行两次 ，我们看到的页面效果也就是先为暂无数据，然后再渲染出页面

使用场景：当一条数据的更改影响到多条数据的时候

如何监听多个值的变化?

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
   },
}