Vue中watch用法

new Vue({
  el: '#root',
  data: {
    return {
        form: {
            address: {adresscountryoption:'',adresscityoption:'',adresscountyoption:''},
            place: {placecountryoption:'',placecityoption:'',placecountyoption:''},
        },
        adresscountryoption:[],
        adresscityoption:[],
        adresscountyoption:[],
        placecountryoption:[],
        placecityoption:[],
        placecountyoption:[],
    },
  },
  watch: {
    adresscountryoption(newName, oldName) {
      console.log(newName);
      console.log(oldName);
    }
  } 
})

这是最常规的监听

上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性

watch: {
  adresscountryoption: {
    handler(newName, oldName) {
      
    },
    
    immediate: true,   // 代表在wacth里声明了adresscountryoption这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
  }
}

 

 

 

还有深度监听deep

watch: {
    form: {
      handler(newName, oldName) {
         console.log(form.address.adresscityoption);
      },
      immediate: true,
      deep: true
    }
  } 

这样的方法对性能影响很大，修改form里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理

 

watch: {
  'form.address.adresscityoption': {
    handler(newName, oldName) {
      console.log(newName);
    },
    immediate: true,
    // deep: true
  }
}