watch监听对象

1、watch

// DOM
<span>{{obj.a}}</span>
<button @click="changeA">click me</button>

data() {
    return {
      name: 'a'
    };
  },
  watch: {
    name: function(value,oldValue) {
        console.log(value, oldValue);
    }
  },
  methods: {
      changeA() {
          this.name = this.name + 'a';
      },
  },

deep

然而，当我们监听的数据是比较深层次，比如要监听的数据是一个对象，就需要用到deep这个属性,属性默认为false;
我之前比较有误解的地方就是，总是会以为如果监听的数据如果是在一个对象中，就要使用deep;
要切记，‘深层次’讲的是要监听的数据的值层次深，而不是数据本身处于一个比较深的位置

data(){
    return {
      obj: {
        a: 'a'
      }
    }
  },
  watch: {
    obj: {
      deep: true,
      handler: function () {
        console.log( 'a:'+ this.obj.a );
      }
    }
  },
  methods: {
    changeA: function () {
      this.obj.a += 'a';
    }
  }

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

2、bug：使用deep的场景

情形一：time变化可以被子路由页监听到

//DOM
<DatePicker.RangePicker  
  allowClear={false}  
  size='large'  
  onChange={this.dateOnChange}  
  locale={locale}  
  defaultValue={[moment(this.time.startTime), moment(this.time.endTime)]}  
  ranges={{  
  '今天': [moment(), moment()],  
  '当月': [moment().startOf('month'), moment().endOf('month')],  
  '上个月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],  
  '当前季度': [moment().startOf('quarter'), moment().endOf('quarter')],  
  '上个季度': [moment().quarter(moment().quarter() - 1).startOf('quarter'), moment().quarter(moment().quarter() - 1).endOf('quarter')]  
 }}  suffixIcon={  
 <Icon type='calendar' style='font-size:20px;margin-top:-10px;' />  
 }/>
 
 <router-view  
    time={{  
      startTime: moment(`${this.time.startTime} 00:00:00`).valueOf(),  
      endTime: moment(`${this.time.endTime} 23:59:59`).valueOf(),  
     }}  
  />

// js
 data () {  
  return {  
      time: {  
        endTime: moment(new Date()).format(dateFormat),  
        startTime: moment().startOf('month').format(dateFormat) 
      } 
  }
 },
methods: { 
    dateOnChange (date) { // 日期改变时  
      this.time.startTime = date[0].format(dateFormat)  
      this.time.endTime = date[1].format(dateFormat)  
    },
},

// 子路由页接收time,可以监听time的变化
watch: {  
  time (newVal, oldVal) {  
      this.params.pageIndex = 1  
      this.params.endTime = newVal.endTime  
      this.params.startTime = newVal.startTime  
  }  
},

情形二：time变化子路由页监听不到

//DOM
<DatePicker.RangePicker  
  allowClear={false}  
  size='large'  
  onChange={this.dateOnChange}  
  locale={locale}  
  defaultValue={[moment(this.time.startTime), moment(this.time.endTime)]}  
  ranges={{  
  '今天': [moment(), moment()],  
  '当月': [moment().startOf('month'), moment().endOf('month')],  
  '上个月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],  
  '当前季度': [moment().startOf('quarter'), moment().endOf('quarter')],  
  '上个季度': [moment().quarter(moment().quarter() - 1).startOf('quarter'), moment().quarter(moment().quarter() - 1).endOf('quarter')]  
 }}  suffixIcon={  
 <Icon type='calendar' style='font-size:20px;margin-top:-10px;' />  
 }/>
 
 <router-view time={this.time} />

// js
 data () {  
  return {  
      time: {  // 初始time是时间戳
        endTime: moment(new Date()).valueOf(),  
        startTime: moment().startOf('month').valueOf()
      } 
  }
 },
methods: { 
    // 日期控件改变时，处理成后台需要的时间戳  
    dateOnChange (date) { 
        this.time.startTime = moment(`${date[0].format(dateFormat)} 00:00:00`).valueOf() 
        this.time.endTime = moment(`${date[1].format(dateFormat)} 23:59:59`).valueOf()
    },
},

// 子路由页接收time,可以监听time的变化
watch: {  
  time (newVal, oldVal) {  
      this.params.pageIndex = 1  
      this.params.endTime = newVal.endTime  
      this.params.startTime = newVal.startTime  
  }  
},

子路由改为deep才可以，为什么之前不用deep都可以：

time: {  
  deep: true,  
  handler: function (newVal, oldVal) {  
      this.params.pageIndex = 1  
      this.params.endTime = newVal.endTime  
      this.params.startTime = newVal.startTime  
  }  
}