vue2 - 监听属性

监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
    },
    //第一种写法
    watch: {
      isHot: {
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue, oldValue) {
          console.log('isHot被修改了', newValue, oldValue)
        }
      }
    }
  })
  //第二种写法
  vm.$watch('isHot', {
    immediate: true, //初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时。
    handler(newValue, oldValue) {
      console.log('isHot被修改了', newValue, oldValue)
    }
  })
</script>

 

深度监听：

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
      numbers: {
        a: 1,
        b: 1,
        c: {
          d: {
            e: 100
          }
        }
      }
    },
    watch: {
      //1.监视多级结构中某个属性的变化
      'numbers.a': {
        handler() {
          console.log('a被改变了')
        }
      },
      //2.监视多级结构中所有属性的变化
      numbers: {
        deep: true,
        handler() {
          console.log('numbers改变了')
        }
      }
    }
  })
</script>

 

简写：

简写不能写初始化调用与深度监听

            watch:{
                //简写
                 isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue,this)
                }
            }

 

         vm.$watch('isHot',(newValue,oldValue)=>{
            console.log('isHot被修改了',newValue,oldValue,this)
        }) 

 

两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。