vue监听属性watch的用法及使用场景详解
作者：冲浪的鹏多多
1. 监听属性 watch
watch 是一个对象，键是需要观察的表达式，用于观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数的参数是新值和旧值。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。
2. 常规用法
watch 监听有两个形参，第一个是新值，第二个是旧值。如下例子：使用 watch 监听了 total 的值，当 total 的值改变时，控制台会打印出旧值和新值。
<template>
<div class="home_box">
<h1>{{ total }}</h1>
<button @click="handleAddTotal">增加</button>
</div>
</template>
<script>
export default {
name: 'Home',
watch: {
total(newValue, oldValue) {
console.log('旧值：', oldValue)
console.log('新值：', newValue)
}
},
data() {
return {
total: 0
}
},
methods: {
handleAddTotal() {
this.total++
}
}
}
</script>
3. 监听对象和route变化
watch监听的目标，可以是基本类型，也可以是对象，也可以是对象里的一个值。而监听目标的属性，可以是一个函数，也可以是一个包含handler（回调函数），immediate（是否初始化后立即执行一次）和deep（是否开启深度监听）的对象。
<script>
export default {
name: 'Home',
watch: {
// 监听基本类型
aaa(newValue, oldValue) {
console.log('旧值：', oldValue)
console.log('新值：', newValue)
},
// 监听基本类型，并且回调函数写在methods里，且初始化加载立即执行一次
bbb: {
handler: 'handleBBB',
immediate: true
},
// 监听对象类型，需要开启深度监听
ccc: {
handler: (newValue, oldValue) {
console.log('旧值：', oldValue)
console.log('新值：', newValue)
},
deep: true
},
// 监听对象里的某个值
'ddd.d2.d21': {
handler: (newValue, oldValue) {
console.log('旧值：', oldValue)
console.log('新值：', newValue)
}
},
// 监听route变化
'$route': {
handler: (newValue, oldValue) {
console.log('旧值：', oldValue)
console.log('新值：', newValue)
}
}
},
data() {
return {
aaa: 0,
bbb: 0,
ccc: {
c1: 0,
c2: 0
},
ddd: {
d1: 0,
d2: {
d21: 0
}
}
}
},
methods: {
handleBBB() {
this.bbb++
}
}
}
</script>
4. 使用场景
watch监听属性使用场景很多。比如：
- 即时表单验证
- 搜索
- 监听数据变化，做出相应改变
- …
如下例子，监听 keyword 的值，实时打印出来。
<template>
<div class="home_box">
<input type="text" v-model="keyword">
</div>
</template>
<script>
export default {
name: 'Home',
watch: {
keyword: {
handler: 'handleKeywordChange'
}
},
data() {
return {
keyword: '',
}
},
methods: {
handleKeywordChange(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
}
</script>
附Watch 的高级用法
深度监听数据的变化
在 Vue 中，深度监听数据的变化意味着不仅监听对象或数组本身的变化，还监听它们内部属性或元素的变化。
当将deep选项设置为true时，Vue 会递归遍历对象的所有属性或数组的所有元素，并为每个属性或元素都创建一个深度观察者。这样，无论是对象的某个属性还是数组的某个元素发生变化，都能触发相应的回调函数。
使用深度监听来监听对象属性的变化如下所示：
watch: {
'obj.foo': {
handler(newVal, oldVal) {
console.log('obj.foo属性发生变化了，新值为:', newVal, '旧值为:', oldVal);
},
deep: true // 深度监听
}
}
在上述示例中，obj是一个对象，foo是它的一个属性。当obj或foo发生变化时，都能触发深度观察者的回调函数。
因此，通过在 Vue 的watch选项中将deep选项设置为true，可以实现对对象属性或数组元素的深度监听，从而捕捉到它们内部值的变化。
注意：深度监听会带来一些性能开销，因为它需要递归遍历对象或数组的所有属性或元素。因此，只在需要深度监听的情况下使用，以避免不必要的开销。
还需要特别注意的是，深度监听仅适用于对象和数组，对于基本类型的数据如字符串、数字等是不起作用的。
立即执行 Watch 回调函数
在 Vue 中，watch 选项的回调函数默认是在被监听的数据发生变化后异步执行的，即在下一次事件循环中执行。
然而，有时我们可能需要立即响应数据变化，并在变化发生后立即执行回调函数。为了实现这一需求，Vue 提供了immediate选项。
当在 watch 选项中设置immediate: true时，Vue 会在监听开始之初立即执行回调函数，无论数据是否已经发生变化。
使用immediate选项来实现立即执行 watch 回调函数的效果如下所示：
watch: {
foo: {
handler(newVal, oldVal) {
console.log('foo属性发生变化了，新值为:', newVal, '旧值为:', oldVal);
},
immediate: true // 立即执行
}
}
在上述示例中，当 Vue 实例创建时，会立即执行一次foo属性的 watch 回调函数，无论foo的值是否已经发生变化。随后，如果foo发生变化，Vue 会在下一次事件循环中再次执行 watch 回调函数。
总之，通过在 Vue 的 watch 选项中设置immediate: true，可以立即执行 watch 回调函数，不等待数据的真正变化。这在某些情况下可以用于立即响应数据变化并执行相关操作的需求。
注意：当设置
immediate: true时，回调函数会在监听开始时立即执行一次，并且不会等待侦听的数据属性的真正变化。这意味着你可能无法获得先前的值，因为此时回调函数仍然是在数据变化之前执行的。
总结
到此这篇关于vue监听属性watch的用法及使用场景的文章就介绍到这了,更多相关vue监听属性watch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！