watch监听对象

来源:http://www.chinese-glasses.com 作者:Web前端 人气:174 发布时间:2020-03-16
摘要:时间: 2019-11-16阅读: 51标签: watch1、watch 首先确认 watch是一个对象,一定要当成对象来用。 // DOMspan{{obj.a}}/spanbutton @click="changeA"click me/buttondata() { return { name: 'a' }; }, watch: { name: function(va

时间: 2019-11-16阅读: 51标签: watch1、watch

首先确认 watch是一个对象,一定要当成对象来用。

// DOMspan{{obj.a}}/spanbutton @click="changeA"click me/buttondata() { return { name: 'a' }; }, watch: { name: function(value,oldValue) { console.log(value, oldValue); } }, methods: { changeA() { this.name = this.name + 'a'; }, },

键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。

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.第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。2.第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)3.第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

2、bug:使用deep的场景

1、watch使用的几种方法

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

通过watch监听data数据的变化,数据发生变化时,就会打印当前的值

//DOMDatePicker.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 } },
watch: { data { console.log console.log } }

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

通过watch监听docData数据的变化,数据发生变化时,this.change_number++

//DOMDatePicker.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 } },
watch: { docData: { handler { this.change_number++ }, deep: true }}

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

通过watch监听data数据的变化,数据发生变化时,执行changeData方法

time: { deep: true, handler: function (newVal, oldVal) { this.params.pageIndex = 1 this.params.endTime = newVal.endTime this.params.startTime = newVal.startTime } }
watch: { data: 'changeData' // 值可以为methods的方法名},methods: { changeData{ conosle.log }}

本文由10bet发布于Web前端,转载请注明出处:watch监听对象

关键词:

最火资讯