Vue 中 watch 的 deep 和 immediate 选项的作用是什么？

推荐答案

在 Vue 中，watch 的 deep 和 immediate 选项分别用于控制监听器的行为：

• deep：当设置为 true 时，Vue 会递归监听对象内部值的变化。这对于监听复杂对象或数组的深层变化非常有用。
• immediate：当设置为 true 时，Vue 会在监听器创建时立即执行回调函数，而不是等到被监听的值发生变化时才执行。

本题详细解读

deep 选项

deep 选项主要用于监听对象或数组的深层变化。默认情况下，Vue 的 watch 只会监听对象或数组的引用变化，而不会监听其内部属性的变化。通过设置 deep: true，Vue 会递归地监听对象或数组的每一个属性，确保任何嵌套属性的变化都能触发回调函数。

示例代码：

watch: {
  someObject: {
    handler(newVal, oldVal) {
      console.log('someObject changed');
    },
    deep: true
  }
}

在这个例子中，someObject 的任何嵌套属性发生变化时，都会触发 handler 函数。

immediate 选项

immediate 选项用于在监听器创建时立即执行回调函数。默认情况下，watch 只会在被监听的值发生变化时才会触发回调。通过设置 immediate: true，Vue 会在监听器创建时立即执行一次回调函数，无论被监听的值是否发生了变化。

示例代码：

watch: {
  someValue: {
    handler(newVal, oldVal) {
      console.log('someValue changed');
    },
    immediate: true
  }
}

在这个例子中，handler 函数会在 watch 监听器创建时立即执行一次，即使 someValue 的值没有发生变化。

结合使用

deep 和 immediate 选项可以结合使用，以便在监听复杂对象时立即执行回调函数，并且在对象内部属性发生变化时也能触发回调。

示例代码：

// www.javascriptcn.com code example
watch: {
  someObject: {
    handler(newVal, oldVal) {
      console.log('someObject changed');
    },
    deep: true,
    immediate: true
  }
}

在这个例子中，handler 函数会在监听器创建时立即执行一次，并且在 someObject 的任何嵌套属性发生变化时也会触发回调。