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 } }