Vue watch监听使用的几种方法
script~ 人气:0一、watch使用的几种方法
1、 通过 watch 监听 msg 数据的变化。
watch: { msg(oldValue, newValue) { console.log(oldValue) console.log(newValue) } }
2、通过 watch 监听 obj数据的变化。(深度监听 deep)
data() { return { obj: { 'name': "赵", 'age': 18 }, } }, watch: { obj: { handler(oldValue,newVal) { console.log(oldValue) console.log(newValue) }, deep: true // 深度监听 } }
3、通过 watch 监听 data 数据的变化,数据发生变化时,执行 change 方法
watch: { data: 'change' // 值可以为methods的方法名 }, methods: { change(oldVal,newVal){ console.log(oldVal,newVal) } }
二、watch中的immediate与handler和deep属性
1、immediate属性
使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
2、handler属性
watch中需要具体执行的方法
3、deep属性
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听,数组字符串一般不需要
data() { return { obj: { 'name': "王", 'age': 18 }, } }, watch: { obj: { // 执行方法 handler(oldValue,newVal) { console.log(oldValue) console.log(newValue) }, deep: true, // 深度监听 immediate: true // 第一次改变就执行 } // 如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性: 'obj.name': { // 执行方法 handler(oldValue,newVal) { console.log(oldValue) console.log(newValue) }, deep: true, // 深度监听 immediate: true // 第一次改变就执行 } }
加载全部内容