在 Vue 中 watch 有哪些属性，分别有什么用？
Vue.js的watch选项在监听数据变化时非常有用。我们可以使用watch来监听任何Vue实例中的数据变化，并执行特定的操作。 在这篇文章中，我们将探讨watch的属性以及它们的用法。
在Vue中，watch选项是一个对象，它包含多个属性，每个属性用于监听一组数据相关的变化。以下是watch选项中可用的属性：
- immediate
该属性表示在初始化组件时是否立即执行回调函数，默认情况下是false。如果将immediate属性设置为true，则watcher将立即执行回调函数以处理初始化状态。如果您希望在初始化后立即处理数据，请将它设置为true。
<script>
export default {
data() {
return {
name: 'John',
age: 25,
};
},
watch: {
name: {
immediate: true,
handler(val) {
console.log('Name:', val);
}
}
}
};
</script>
在上述示例中，我们设置了immediate属性为true，并在设置数据时立即执行handler函数。
- deep
deep属性用于在执行深入观察时使watcher更加敏锐。如果将属性设置为true，则观察者将递归检测对象中嵌套的值，以找出嵌套值中的更改。
<script>
export default {
data() {
return {
obj: { a: { b: 10 } }
};
},
watch: {
obj: {
deep: true,
handler(val) {
console.log('Value:', val);
}
}
}
};
</script>
在上述示例中，我们将deep属性设置为true。这意味着如果obj中元素的值更改，则将触发Handler函数。
- handler
handler属性是必需的，用于监视并处理数据的任何更改。该属性接收函数作为参数，每当此对象的属性更改时调用该函数。
<script>
export default {
data() {
return {
name: 'John',
};
},
watch: {
name(val, oldVal) {
console.log('New Name:', val);
console.log('Old Name:', oldVal);
}
}
};
</script>
在上述示例中，我们定义了一个名为name的数据对象，并在watch选项的对象中添加了一个名为name的属性以监听其变化。在handler函数中，我们输出新值和旧值以便于调试和处理。
- immediate
immediate属性表示在第一次运行时是否立即执行处理程序函数，并执行初始值。
<script>
export default {
data() {
return {
name: 'John',
};
},
watch: {
name: {
immediate: true,
handler(val, oldVal) {
console.log('Value:', val);
console.log('Old Value:', oldVal);
}
}
}
};
</script>
在上述示例中，我们将watch选项中的immediate属性设置为true。然后，处理程序函数将在初始值上执行，并且每次值更改时执行处理程序函数。
结论
Vue.js的watch选项是一个有用的工具，用于监听数据变化并触发相应的回调函数。在有许多不同的配置选项中，每个选项都包含了不同的属性，以满足我们特定的需求。 在本文中，我们了解了watch选项中的属性以及它们的用途。无论您是否要监听对象或要在瞬时数据更改时重新执行处理函数，watch选项都是一个非常有用的功能。
