Vue.js 中的 watch 选项允许开发者监听特定数据的变化。当数据发生变化时，watch 会触发一个回调函数，用于执行更新视图或其他任务。其配置选项包括 immediate，用于指定是否立即执行回调，以及 deep，用于指定是否递归监听对象或数组的更改。
Vue.js 中使用 watch
在 Vue.js 中，watch 选项允许开发者监听特定数据的变化。一旦数据发生变化，watch 就会触发一个回调函数，该函数可以执行更新视图或执行其他操作等任务。
使用语法
watch: {
// 要监听的数据属性
propertyName: {
// 回调函数
handler(newValue, oldValue) {
// 在数据发生更改时运行的代码
},
// 可选：配置项
immediate: true | false, // 立即执行回调
deep: true | false // 深度监听对象或数组
}
}使用示例
立即学习“前端免费学习笔记（深入）”；
mallcloud商城
下载
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
export default {
data() {
return {
count: 0
}
},
watch: {
// 监听 count 属性
count: {
handler(newValue, oldValue) {
console.log(`count 发生变化：${oldValue} -> ${newValue}`)
},
// 立即执行回调
immediate: true
}
}
}在这个示例中，count 属性被监听。当 count 发生变化时，handler 函数会被调用，它会记录 count 值的变化。由于 immediate 设置为 true，回调函数会在组件首次渲染时立即执行。
配置选项
watch 选项提供了几个配置选项，用于自定义其行为：
- immediate: 指定是否在组件初始化时立即执行回调函数。
-
deep: 指定是否递归监听对象或数组的更改。如果设置为
true，则数组或对象中的嵌套属性的变化也会触发回调函数。
注意：
- 避免在
watch回调函数中重新设置同一数据属性，这会导致陷入无限循环。 - 如果监听的对象或数组较大，请考虑使用
deep选项，以避免性能问题。 - 如果您只关心初始值，可以使用
created钩子函数。
