Vue中对watch的理解(关键是immediate和deep属性)

Vue中的watch选项可以用来监听数据的变化，并在数据变化时执行一些自定义的操作。它包括了一些属性，如immediate和deep，这些属性可以帮助我们更好地控制watch的行为。

immediate

immediate属性表示在实例被创建时，是否立即执行一次watcher回调函数。默认情况下，watch回调函数是在第一次数据变化之后执行的，但是如果需要在组件生命周期中初始化数据或触发一些初始化行为，可以通过设置immediate为true来达到目的。

示例1

下面的示例中，我们在immediate为true的情况下，对count数据进行监控，并且在回调函数中将count乘以3输出。由于immediate为true，因此在创建实例时watch回调函数会立即执行一次，输出3。当count改变时，回调函数会再次执行，此时输出修改后的count乘以3。

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal * 3);
      },
    },
  },
};
</script>

deep

deep属性表示监听对象内部的变化。默认情况下，只有监听对象本身的变化才会触发回调函数，而不会监听对象内部属性的变化。但是如果需要监听对象内部属性的变化，可以将deep属性设置为true。

示例2

下面的示例中，我们在deep为true的情况下，对obj数据进行监控，并且在回调函数中输出obj内部属性的变化。由于deep为true，因此当obj内部属性a改变时，回调函数也会执行，输出修改后的obj。

<template>
  <div>{{ obj.a }}</div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        a: 1,
        b: 2,
      },
    };
  },
  watch: {
    obj: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(newVal.a, newVal.b);
      },
    },
  },
};
</script>

总的来说，watch选项是Vue非常重要的一个数据响应式机制，可以通过该选项监听数据的变化，并在回调函数中执行一些自定义的操作。immediate和deep属性可以帮助我们更好地控制watch的行为，让我们更好地应对实际的业务场景。