vue中的watch监听
vue中的watch和computed 看上去很相似,实际上有很大区别;
computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;
watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;
运用场景:
当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;
当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
这里简单介绍一下watch的使用。
<template>
<div>
<button @click="change" style="margin-right:20px">改变输入值</button>
<input type="number" v-model="value">
<br>
</div>
</template>
<script>
export default {
data () {
return {
value: 0
}
},
watch: {
value (newValue, oldValue) {
console.log('改变了', '新值:', newValue, '旧值:', oldValue)
}
},
methods: {
change () {
this.value = this.value + 1
}
}
}
</script>
这就是一个最简单监听,监听一个值的动向,如果这个值改变了,watch就会触发。demo这里value是一个数字类型,每次点击值会增加改变 所以每次点击都会触发watch监听效果
监听的是一个值,所以这里直接拿这个值就可以了 ,它有2个属性,第一个是新值,第二个是上一次的值。
如果监听的是个对象或者是对象中的属性
watch: {
// 具体某个值
'value.a': {
handler (newValue, oldValue) {
console.log('改变了', '新值:', newValue, '旧值:', oldValue)
},
deep: true, // 对象内部的属性监听,也叫深度监听
immediate: true // 立即监听
}
// 监听对象
// value: {
// handler (newValue, oldValue) {
// console.log('改变了', '新值:', newValue, '旧值:', oldValue)
// },
// deep: true, // 对象内部的属性监听,也叫深度监听
// immediate: true // 立即监听
// }
},