watch 是 Vue 中用于监听数据属性变化的选项,它将执行响应函数来更新视图或执行其他操作。语法:watch: { dataProperty: { handler(newValue, oldValue) { ... }, immediate: true } }。它可以方便地响应数据变化,提高性能,但只能监听 data 中的顶级属性,不适用于对象或数组。

Vue 中 watch 用法
什么是 watch?
watch 是 Vue 中的一个选项,用于侦听数据属性的变化并执行相应的响应函数。当属性值发生变化时,响应函数将被触发,执行更新视图或其他操作。
语法:
立即学习“前端免费学习笔记(深入)”;
watch: {
// 要观察的数据属性
dataProperty: {
// 观察器选项
handler(newValue, oldValue) {
// 属性值发生变化时执行的函数
},
// 可选配置选项
immediate: true // 是否在组件创建时立即触发观察器
}
}用法:
-
定义观察目标和响应函数:使用
dataProperty指定要观察的数据属性,并在handler函数中定义属性值变化时执行的操作。 -
配置选项:
-
immediate: 默认值为false,表示在组件创建时不触发观察器。将其设置为true会在组件创建时立即触发观察器。
-
好处:
使用 watch 可以:
- 响应数据属性的变化,更新视图或执行其他操作。
- 提高性能,因为只会在数据属性实际发生变化时触发响应函数。
注意事项:
- watch 只能观察
data中的属性,不能观察methods或computed属性。 - watch 不支持对象或数组的变化,只能侦听顶级属性的变化。为了侦听对象或数组的变化,可以使用 vuex 或 vue-observable 等库。










