Vue中watch属性两种写法的区别及immediate、deep作用解析

一、两种watch写法的核心区别 #

1. 带括号的函数简写形式 #

这种写法是watch配置的简化语法，本质是只定义了handler函数的对象配置的缩写。比如示例中的：

test() {
  // 监听逻辑
}

等价于：

test: {
  handler() {
    // 监听逻辑
  }
}

• 仅支持基础监听：只有当目标属性值发生变化时触发，不支持深度监听和初始化执行。
• 适配简单场景：比如监听普通字符串、数字这类非引用类型的属性变化。

2. 不带括号的对象配置形式 #

这种写法是watch的完整配置形式，除了必填的handler函数外，还可以添加immediate、deep等扩展属性，比如示例中的labels配置：

labels: {
  immediate: true,
  deep: true,
  handler(option) {
    // 监听逻辑
  }
}

• 支持自定义监听行为：可以开启深度监听、初始化立即执行等高级功能。
• 适配复杂场景：比如监听对象/数组这类引用类型的内部属性变化，或者需要组件初始化就执行监听逻辑的场景。

二、immediate和deep属性的具体作用 #

1. immediate 属性 #

• 默认行为：watch的handler仅在目标属性值发生变化时触发，组件初始化阶段不会执行。
• 设置immediate: true后：组件挂载完成后立即执行一次handler，无论目标属性值是否有变化。
• 适用场景：比如需要根据初始数据立即执行渲染、请求接口等逻辑，示例中的labels就会在组件初始化时先跑一遍handler。

2. deep 属性 #

• 默认行为：Vue的watch是浅监听——如果监听的是对象/数组，只有当对象的引用发生改变（比如直接替换整个对象：this.labels = {}）时才会触发handler，对象内部的属性变化（比如this.labels.title = 'new'）不会触发。
• 设置deep: true后：开启深度监听，递归监听目标对象的所有嵌套属性，只要任何一个子属性发生变化，都会触发handler。
• 适用场景：需要监听对象/数组内部数据变化的场景，比如表单对象的多个字段变化、数组元素的增删改等。

内容的提问来源于stack exchange，提问作者bohi tibuti