watch監聽對象

1.1watch

// 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';
    }
  }

1.2bug：使用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  
  }  
}