watch和computed的使用及区别

一、watch侦听器

watch侦听器允许开发者监听数据的变化，从而针对数据的变化做特定的操作。

immediate选项

默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立即被调用，则需使用immediate选项。

deep选项

当watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。需要使用deep选项

监听对象单个属性的变化

<template>
  <input type="text" v-model.trim="msg">
  <input type="text" v-model.trim="info.msg">
  <input type="text" v-model.trim="info.value">
</template>
<script>
export default {
        data(){
            return{
                msg:'zs',
            info:{
                    msg:'',
                value:''
            }
        }
    },
    watch:{
            //简写，用于基本的 watch 需求。不支持更多配置选项，如 immediate 和 deep。
        // msg(newVal,oldVal){
            //     console.log('newVal,oldVal', newVal,oldVal);
        // },
        msg:{
                handler(newVal,oldVal){
                console.log('newVal,oldVal', newVal,oldVal);
        },
            immediate:true
        },
        info:{
                handler(newVal,oldVal){
                console.log('深度监听对象属性newVal,oldVal', newVal,oldVal);
        },
            immediate:true,
            deep:true
        },
        'info.msg':{
                handler(newVal,oldVal){
                console.log('监听单个属性newVal,oldVal', newVal,oldVal);
        },
            immediate:true,
            deep:true
        }
    }
}
</script>

二、计算属性computed

计算属性本质上是一个function函数，可以监听data中数据的变化，并return一个计算后的值，供组件渲染dom时使用。

计算属性会缓存计算的结果，只有在计算属性的依赖项发生变化时，才会重新计算。

计算属性只能当作普通数据项使用，不能当作方法调用（不能使用括号调用）。

<template>
    <div>
        <input type="text" v-model.number="num">
    </div>
    <div>{{ plus }}</div>
</template>
<script>
  export default {
      name:'demo',
      data(){
          return{
              num:111
          }
      },
      computed:{
        plus(){
           return  this.num*2
        }
      }
  }
</script>

三、计算属性和侦听器的区别

应用场景不同：

计算属性侧重于监听多个值的变化，最终计算并返回一个新值

侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值