vue 3 中使用 watch api 监听数据变化，有两种方法：watch 选项或 watch 方法。回调函数接收 newval（最新值）和 oldval（旧值，仅限 watch 选项）。回调函数可返回 void、对象（包含更新数据）或 promise。注意，watch 在下次组件更新时才触发回调函数，深度监听数据变化，并推荐使用 lazy 选项延迟触发。
Vue 3 中使用 watch
在 Vue 3 中，watch API 允许开发者监听数据变化并相应地更新 UI。
如何使用 watch
在 Vue 3 中使用 watch 有两种方法：
立即学习“前端免费学习笔记（深入）”；
1. watch 选项
<code class="javascript">export default {
watch: {
// 监听数据变化并执行回调函数
myData(newVal, oldVal) { /* ... */ }
}
}</code>2. watch 方法
<code class="javascript">export default {
watch() {
return {
myData: (newVal, oldVal) => { /* ... */ }
}
}
}</code>回调函数参数
回调函数接收两个参数：
- newVal：数据的最新值
- oldVal：数据的旧值（可选，仅在使用 watch 选项时提供）
回调函数返回值
回调函数可以返回以下值：
- void： 不执行任何操作
- 一个对象： 包含需要更新的数据属性和值的键值对
- 一个 Promise： 等待 Promise 解决后再更新数据
例如
<code class="javascript">export default {
watch: {
myData(newVal) {
// 如果 myData 超过 100，更新另一个数据属性
if (newVal > 100) {
this.anotherData = '超过 100'
}
}
}
}</code>注意：
- watch 不会立即触发回调函数。它会在下次 Vue 组件更新时触发。
- watch 监听数据属性的深度变化。这意味着它也会触发子属性的变化。
- 如果不需要监听数据变化，可以使用
lazy选项延迟触发回调函数。 - 避免在 watch 回调函数中修改原始数据。相反，返回一个对象来更新数据。
