一、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>

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

应用场景不同:

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

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

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部