Vue 中 watch 是一种响应式函数，用于监听数据属性值的变化并执行回调函数。基本用法是 watch(property, handler)，其中 property 是要监视的属性或属性数组，handler 是回调函数。它还可以配置选项对象，例如 immediate（立即调用）和 deep（深度监听）。watch 适用于需要对数据属性值的变化做出反应的情况，例如更新 UI 或异步加载数据。
Vue 中 watch 的用法
什么是 watch
watch 是 Vue 中一个响应式函数，它允许您监听数据属性值的变化并执行回调函数。当被监视的属性发生改变时，回调函数会被调用，您可以在其中执行任何必要的更新或操作。
语法
立即学习“前端免费学习笔记（深入）”；
<code class="js">watch(property, handler)</code>
- property: 要监视的属性或属性数组。
- handler: 当属性值改变时被调用的回调函数。它接收新值和旧值作为参数。
基本用法
要监视某个属性，只需传入属性名称和一个回调函数：
<code class="js">watch('count', (newValue, oldValue) => {
// count 的新值是 newValue，旧值是 oldValue
})</code>监视多个属性
要一次监视多个属性，可以传递一个属性数组：
<code class="js">watch(['count', 'name'], (newValue, oldValue) => {
// 监视的值在 newValue 中作为对象提供，键为属性名
})</code>选项对象
您可以使用选项对象来配置 watch 行为：
<code class="js">watch({
count: {
handler(newValue, oldValue) {
// ...
},
immediate: true,
deep: true
}
})</code>- immediate: 如果为 true，回调函数在被监视的属性初始化时立即调用。
- deep: 如果为 true，watch 将监视对象和数组的深度更改，而不是仅监视引用更改。
高级用法
监听特定属性路径
使用点表示法可以监听对象属性路径的变化：
<code class="js">watch('user.name', (newValue, oldValue) => {
// ...
})</code>使用 return 值
watch 回调函数可以返回一个函数或一个包含 unwatch 函数的 Promise：
- 函数: 当组件被销毁时，该函数会被调用，您可以使用它来清除任何资源或取消订阅事件。
- Promise: 当 Promise 被解析时，watch 将被解除。
何时使用 watch
watch 适用于需要对数据属性值的变化做出反应的情况，例如：
- 更新 UI
- 触发其他计算属性或方法
- 异步加载数据
- 表单验证
替代方案
在某些情况下，computed properties 可能是 watch 的替代方案。但是，computed properties 是派生的，这意味着它们的值是由其他响应式属性计算出来的。
