初谈watch数据监听

296 阅读1分钟

1、watch使用的几种方法 (1)通过watch监听data数据值的变化(普通监听) (2)通过watch监听docData数据的变化,数据发生变化时(使用deep:true进行深度监听) (3)通过watch监听data数据的变化,数据发生变化时,执行changeData方法 watch: { data: 'changeData' // 值可以为methods的方法名 }, methods: { changeData(curVal,oldVal){    conosle.log(curVal,oldVal)   } } 2、详解watch中的immediate、handler和deep属性 (1)immediate和handler 这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。 watch: { docData: { handler(newVal) { this.change_number++ }, immediate: true } } (2)deep 当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。 data() { return { docData: { 'doc_id': 1, 'tpl_data': 'abc' } } }, watch: { docData: { handler(newVal) { this.change_number++ }, deep: true }
} 设置deep:true则可以监听到docData.doc_id的变化,此时会给docData的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性: data() { return { docData: { 'doc_id': 1, 'tpl_data': 'abc' } } }, watch: { 'docData.doc_id': { handler(newVal, oldVal) { ...... }, deep: true }
} 这样只会给对象的某个特定的属性加监听器 3.watch使用技巧

1.场景:表格初始进来需要调查询接口 getList(),然后input 改变会重新查询 created(){ this.getList() }, watch: { inpVal(){ this.getList() } }

3、总结 数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。