【尚硅谷 Vue学习笔记】P22 监视(侦听)属性 P23 深度监视 p24监视的简写形式 P25watch对比computed

本文链接：https://blog.csdn.net/m0_54381284/article/details/127866927

文章目录

P22 监视(侦听)属性
P23 深度监视
p24监视的简写形式
P25watch对比computed

前言：仅做笔记使用。不是制作精良的博客。

时间：2022/11/15

P22 监视(侦听)属性

watch:{
        isHot:{
          //hander什么时候调用？当isHot发生改变时
          handler(){
            console.log('isHot被修改')
          }
        }
      }

immediate:false//初始化时让handler调用一下

<body>
  <!--准备好一个容器-->
  <div id="root">
    <h2>今天天气很 {{info}}</h2>
    <button @click="changeWeather">切换天气</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    const vm=new Vue({
      el: '#root',
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      },
    })
    vm.$watch('isHot',{
      handler(newValue,oldValue){
       console.log('isHot被修改',newValue,oldValue)
      }
    })
  </script>
</body>

P23 深度监视

<body>
  <!--准备好一个容器-->
  <div id="root">
    <h2>今天天气很 {{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr>
    <h2>a的值是:{{numbers.a}}</h2>
    <button @click="numbers.a++">点我a++</button>
  </div>


  <script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
      el: '#root',
      data: {
        isHot: true,
        numbers:{
          a:1,
          b:1
        }
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      },
      watch:{
        isHot:{
          //hander什么时候调用？当isHot发生改变时
          handler(newValue,oldValue){
          console.log('isHot被修改',newValue,oldValue)
          }
        }
      }
    })
  </script>
</body>

要求：检测a的值。

注意点：

watch:{
    //isHot是简写方式
    isHot:{
        
    }
    //完整方式:
    'isHot':{
        
    }
    //检测a
    //这样写是错误的
    numbers.a:{
        
    }
    //正确写法：完整方式
    'numbers.a':{
        
    }
}

//监视多级结构中某个属性的变化
        'numbers.a':{
          handler(){
            console.log('a被改变了')
          }
        }

想要监视numbers里面的数据的变化:

配置项：deep

//监视多级结构中所有属性的变化 
numbers:{
     //深度监视开启
          deep:true,
          handler(){
            console.log('numbers改变了')
          }
       }

开启之后：点我a++/点我b++，都会有numbers改变了

p24监视的简写形式

 watch: {
        //正常：
        // isHot:{
        //   //handler什么时候调用？当isHot发生改变时
        //   handler(newValue,oldValue){
        //   console.log('isHot被修改',newValue,oldValue)
        //   }
        // }
        //简写：
        //只有hander的时候,比如没有deep
        isHot(newValue, oldValue) {
          console.log('isHot被修改', newValue, oldValue)
        }
      }

 vm.$watch('isHot',function(newValue,oldValue){
      console.log('isHot被修改',newValue,oldValue)
    })

P25watch对比computed

  <script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
      el:'#root',
      data:{
        firstName:'张',
        lastName:'san',
        fullName:'张-san'
      },
      watch:{
        firstName(val){
          this.fullName=val+'-'+this.lastName
        },
        lastName(val){
          this.fullName=this.firstName+'-'+val
        }
      }

    })
  </script>

实现起来比较麻烦，但是我提个需求：等一秒钟再执行(异步计算)

firstName(val){
          //给个定时器
    	//定时器不是Vue所控制的
          setTimeout(()=>{
            this.fullName=val+'-'+this.lastName
          },1000);
          
        }