Vue监视属性详解

监视属性

• 监视属性：watch对象中的属性，该属性名表示data或者computed对象中的同名属性被监视了

即监视属性full表示data对象中的full属性被监视

• 作用：用于监视data或者computed对象中的属性

• 用法：当需要在数据变化时执行异步或开销较大的操作时，用它

• 监视属性的配置属性：

  对于watch对象，Vue默认通过判断它监视的属性的存储地址是否改变来判断该属性是否被改变

  • handler(newValue,oldValue)：当监视属性监视的属性的值的发生改变时调用

    1. newValue：被监视的属性修改之后的值
    2. oldValue： 被监视的属性被修改之前的值
    3. note：这两者参数是可选的，即handler函数的参数可选

  • immediate：控制初始化时否是调用hander，默认值为false

  • deep：控制是否开启深度监视，默认值为false

    1. deep = false：只要watch对象监视的属性的地址没有发生改变,就认为它没有改变，哪怕这个属性是个对象或者数组且其内部的值发生了变化

    2. deep = true：如果watch对象监视的属性是对象或者数组时，且它的内部值发生改变，认为这个属性发生了改变

  data:{
      person:{
          name:"熊大",
          age:19    
      }
  },
  watch:{
      person:{
          handler(){
              console.log("监视firstName")
          }
      }
  }    
  //person的name属性被修改时,但是person的值(是个地址)没有被修改,watch就认为person没有被修改
  //当deep = true,对于上述情况,watch认为person被修改了
  

• 写法：

  • 写法1

  <script type="text/javascript">
  
      const vm = new Vue({
          el: '#root',
          data: {
              firstName: '熊',
              lastName: '大'
          },
          watch:{
             //监视data对象中的firstName
             firstName:{
                immediate = true 
                handler(){
                   console.log("监视firstName")
               }
             }
          }
      })
  </script>
  

  • 写法2：命令式

  vm.$watch("firstName",{
       immediate = true 
       handler(newValue,oldValue){
           console.log("监视data对象中的firstName属性")
       }
  })
  

• 简写：当监视属性中只需要配置handler函数时才能简写

watch:{
   //这个函数相当于handler函数
   //full表示监视的属性 
   full(newValue,oldValue){
       console.kog("hello")
   }
}

vm.$wathch("full",function(newValue,oldValue){
  
})