vue中watch的详细用法
程序员文章站
2022-06-06 19:14:07
...
在vue中,使用watch来响应数据的变化。watch的用法大致有三种。
1.最简单的watch用法
<input type="text" v-model="cityName"/>
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName(newName, oldName) { // ... }
}
})
直接写一个监听处理函数,当每次监听到 cityName 值发生改变时,执行函数。
2.对象里的属性监听
immediate
当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法
deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
设置deep: true 则可以监听到cityName.name
的变化,此时会给cityName
的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
watch: { 'cityName.name': {
handler(newName, oldName) { // ... },
deep: true,
immediate: true
}
}
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。
上一篇: 让女人脸红心跳的十大男性职业 这些男性职业相当有魅力
下一篇: CorelDRAW 绘制逼真的折扇
推荐阅读